jquery动画队列

进入主题之前，先看一个例子：

<div class="button">
  <button id="animate">animate</button>
</div>
<div class="box">
  <p>这是box里的内容</p>
</div>
<style>
  .box{
    border:2px solid blue;
  }
</style>
<script>
$("#animate").on("click",function(){
  $(".box").animate({
    width: "500px"
  },5000);
  console.log("这是点击时出现的文字");
});
</script>

为了效果更明显，动画的时间设置为5s，可以看出控制台输出的文字在点击按钮是立即触发，这说明了一个事情，即动画方法animate不是同步的，而是异步的，这就引申出了动画队列。

动画的执行不是同步的，而是加入到动画队列中，这样就可以实现多个动画效果连在一起，构成一个连续的动画。

queue( [ queueName ], callback( next ) )

queue()方法用来显示在匹配的元素上的已经执行的函数队列

• queueName：一个含有队列名的字符串。默认是fx，标准的动画队列
• callback(next)：添加到队列的新函数

<div class="button">
  <button id="animate">animate</button>
</div>
<div class="box">
  <p>这是box里的内容</p>
  <p></p>
</div>
<style>
  .box{
    border:2px solid blue;
  }
</style>
<script>
$("#animate").on("click",function(){
  setInterval(function(){
    $(".box p").last().html("当前动画队列还有" + $(".box").queue().length);
  },1000);

  $(".box").animate({
    width: "500px"
  },5000).animate({
    height: "500px"
  },5000);

  $(".box").queue(function(){
    $(this).animate({
    width: "50px"
  });
    $(this).css("background","#fff000");
  });

  $(".box").animate({
    width: "200px"
  },5000).animate({
    height: "200px"
  },5000);
  console.log("这是点击时出现的文字");
});
</script>

如上代码，queue()方法的返回函数里animate()没有执行，css()执行了，后面的两个animate()也没有执行，这说明了一件事，queue()方法虽然可以给动画队列添加新的动画，但是无法自动执行，而且会中断动画队列的执行。

dequeue([queueName])

dequeue()方法用来执行匹配元素队列的下一个函数

• queueName：一个含有队列名的字符串。默认是fx，标准的动画队列

$(".box").queue(function(){
    $(this).animate({
    width: "50px"
  });
    $(this).css("background","#fff000");
    $(this).dequeue();
});

会发现queue()方法会把回调函数里新增的动画放在动画队列的最后去执行。

clearQueue([queueName])

clearQueue()方法用于清除动画队列中未执行的动画，并不影响当前动画效果（即正在进行的动画不受影响），当重新执行时，动画队列重新开始，但已经执行过的队列，不会再显示效果

• queueName：一个含有队列名的字符串。默认是fx，标准的动画队列

<div class="button">
  <button id="animate">animate</button>
  <button id="clearqueue">clearQueue</button>
</div>
<div class="box">
  <p>这是box里的内容</p>
  <p></p>
</div>
<style>
  .box{
    border:2px solid blue;
  }
</style>
<script>
$("#animate").on("click",function(){
  setInterval(function(){
    $(".box p").last().html("当前动画队列还有" + $(".box").queue().length);
  },1000);

  $(".box").animate({
    width: "500px"
  },5000).animate({
    height: "500px"
  },5000);

  $(".box").queue(function(){
    $(this).animate({
    width: "50px"
  });
    $(this).css("background","#fff000");
  });

  $(".box").animate({
    width: "200px"
  },5000).animate({
    height: "200px"
  },5000);
  console.log("这是点击时出现的文字");
});

$("#clearqueue").on("click",function(){
  $(".box").clearQueue();
});
</script>

finish()

停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。

$("#finish").on("click",function(){
  $(".box").finish();
});

stop([clearQueue ] [, jumpToEnd ])

停止当前正在运行的动画

• 参数为空：停止当前动画，执行动画队列中的下一个动画
• [clearQueue ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，影响动画效果
• [, jumpToEnd ]：boolean类型，停止当前正在进行的动画，清空未执行的动画队列，并直接跳到本次动画的结束

具体例子可参考：http://js.jirengu.com/vipeqisike

来源