jQuery中队列queue()函数的实例教程

概述

jQuery中的队列queue()函数是为了解决动画效果、事件响应等执行顺序的问题。它可以将多个动作按照顺序排队执行，确保动画效果平滑流畅。

基本语法

$(selector).queue(function(){ 
  // 这里指定一个队列中的函数 
});

通过该函数，我们可以往队列中添加要依次执行的函数。每个函数执行完成后，队列中下一个函数会依次执行。

示例一：一个依次执行的动画效果

假设我们有三个div，分别为#div1、#div2、#div3，现在要依次给它们添加动画效果。

HTML代码如下：

<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

jQuery代码如下：

$("#div1").animate({height:'100px'},1000);
$("#div2").queue(function(){
  $(this).animate({width:'300px'},2000);
  $(this).dequeue();  // 该函数执行完成后，手动出队，继续执行下一个函数
});
$("#div3").animate({width:'100px',height:'100px'},1000);

上述代码理解可以这样表述：

• 给#div1添加高度为100px的动画效果，时长1秒
• 给#div2添加宽度为300px的动画效果，时长2秒，然后手动出队
• 给#div3添加高度为100px、宽度为100px的动画效果，时长1秒

上述代码执行后，会将#div1的高度动画效果执行完成后，再依次执行#div2和#div3的动画效果。其中，#div2的动画效果不是在上一个动画效果执行完成后立即执行，而是等待执行前面列队的其他函数。

示例二：事件响应中依次执行函数

假设我们有一个button，点击后要依次执行三个函数。

HTML代码如下：

<button>点击触发</button>

jQuery代码如下：

$("button").click(function(){
  $("p:first").slideUp(1000);
  $("p:last").slideUp(1000);
  $("p:eq(1)").queue(function(){
    $(this).css("background-color", "green");
    $(this).dequeue();  // 该函数执行完成后，手动出队，继续执行下一个函数
  });
});

上述代码理解可以这样表述：

• 当button被点击时，先执行#div1的slideUp动画效果，时长为1秒
• 执行#div3的slideUp动画效果，时长为1秒
• 给#div2添加CSS背景色为绿色的效果，然后手动出队以继续执行下一个函数

上述代码执行后，会先依次执行#div1和#div3的slideUp动画效果，而#div2的背景色等到其他动画效果执行完成后才会更换为绿色。

总结

通过这两个示例，我们可以看到，queue()函数可以用来解决多个函数顺序执行的问题。同时，我们也可以看到，我们可以在队列中添加各种各样的自定义函数，不仅限于动画效果执行。