小码哥的IT人生

首页 > JS > jQuery

jQuery 数据 - jQuery.queue() 方法 概述

jQuery 2022-06-01 18:41:20小码哥的IT人生shichen

jQuery 数据 - jQuery.queue() 方法

实例

显示队列的长度:

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );
  setTimeout(showIt, 100);
}

完整实例:

<!DOCTYPE html>
<html>
<head>
  <style>div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:60px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  p { color:red; }  </style>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p>队列长度是:<span></span></p>
<div></div>
<script>
var div = $("div");
function runIt() {
  div.show("slow");
  div.animate({left:'+=200'},2000);
  div.slideToggle(1000);
  div.slideToggle("fast");
  div.animate({left:'-=200'},1500);
  div.hide("slow");
  div.show(1200);
  div.slideUp("normal", runIt);
}
function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );
  setTimeout(showIt, 100);
}
runIt();
showIt();
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

定义和用法

queue() 方法显示或操作在匹配元素上执行的函数队列。

注释:这是底层级的方法;使用 .queue() 更加方便。

语法

.queue(queueName)
参数 描述
queueName 可选。字符串值,包含序列的名称。默认是 fx, 标准的效果序列。

操作队列

queue() 方法操作在匹配元素上执行的函数队列。

语法

.queue(queueName,newQueue)
参数 描述
queueName 可选。字符串值,包含序列的名称。默认是 fx, 标准的效果序列。

详细说明

每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中,只使用一个队列(名为 fx)。队列运行在元素上异步地调用动作序列,而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如:

$('#foo').slideUp().fadeIn();

当这条语句执行时,元素会立即开始其滑动动画,但是淡入过渡被置于 fx 队列,只有当滑动过渡完成后才会被调用。

.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用;它允许我们在队列末端放置一个新函数。

这个特性与动画方法提供回调函数类似,但是无需在动画执行时设置回调函数。

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

等价于:

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

请注意,当通过 .queue() 添加函数时,我们应当确保最终调用了 .dequeue(),这样下一个排队的函数才能执行。

例子 1

对自定义函数进行队列操作:

$(document.body).click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},2000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});

完整实例:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  请点击这里 ...
  <div></div>
<script>$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

例子 2

设置队列数组来删除队列:

$("#start").click(function () {
  $("div").show("slow");
  $("div").animate({left:'+=200'},5000);
  $("div").queue(function () {
    $(this).addClass("newcolor");
    $(this).dequeue();
  });
  $("div").animate({left:'-=200'},1500);
  $("div").queue(function () {
    $(this).removeClass("newcolor");
    $(this).dequeue();
  });
  $("div").slideUp();
});
$("#stop").click(function () {
  $("div").queue("fx", []);
  $("div").stop();
});

完整实例:

<!DOCTYPE html>
<html>
<head>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
  <button id="start">开始</button>
  <button id="stop">结束</button>
  <div></div>
  <script>$("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024