Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

jQuery动画队列的处理

  jQuery中有个动画队列的机制。当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中,等前面的动画完成后再开始执行。可是用户的操作往往都比动画快,如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积,影响到效果。
  jQuery中有stop这个方法可以停止当前执行的动画,并且它有两个布尔参数,默认值都为false。第一个参数为true时会清空动画队列,第二个参数为true时会瞬间完成掉当前动画。所以,我们经常使用obj.stop(true,true)来停止动画。但是这还不够!正如jQuery文档中的说法,即使第二个参数为true,也仅仅是把当前在执行的动画跳转到完成状态。这时第一个参数如果也为true,后面的队列就会被清空。如果一个效果需要多个动画同时处理,我们仅完成其中的一个而把后面的队列丢弃了,这就会出现意料之外的结果。比如
<div>次碳酸钴</div>
<input type="button" value="开始" />
<style>
div {
  display:none;border:1px solid #CCC;
  padding:10px;background:#F6F6F6;
}
input {position:absolute;top:100px;}
</style>
<script src="jquery.js"></script>
<script>
var div=$("div");
$("input").click(function(){
  div.stop(true,true).fadeIn(500).delay(2000).fadeOut(500);
});
</script>
  这个例子在狂点“开始”之后就会出现和代码描述不同的结果。对于这种情况我需要一步步的来,因为整个动画队列的每一个结果都是很重要的。于是需要使用一个循环完成语句来遍历所有队列中的动画项,而不是简单的执行完当前动画就把后面的队列项抛弃。
while(div.queue().length)div.stop(false,true);
div.fadeIn(500).delay(2000).fadeOut(500);
  stop的第一个参数是用来告诉jQuery是否抛弃后面的队列,这里用false;第二个参数是直接完成当前动画,这里用ture。循环的结束判断是当队列为空时结束。这样的效果比起直接抛弃队列的做法要好的多,不过代码麻烦了一些。这不用担心,因为jQuery1.9中对这个做法做了封装。我也是前几天仔细看了jQuery1.9的文档才发现的。在jQuery1.9中有个finish方法,直接调用它可以可以把当前队列的所有项目都执行掉。如果你的项目已经用了低版本的jQuery,那就只好自己使用循环来解决了。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^