标签:
当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。
jQuery提供了以下几种方法来操作动画队列。
1) stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。
2) queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。
3) queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。
4) dequeue():执行动画函数队列头的第一个动画函数,并将该动画函数移出队列。
5) clearQueue([queueName]):清空动画函数队列中的所有动画函数。
下面的程序代码示范了访问默认动画队列的属性:
<!DOCTYPE html> <html> <head> <meta name="author" content="OwenWilliam /> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <title> 动画队列 </title> <style> div { width: 60px; height: 60px; position:absolute; top:60px; background: #f0f; display:none; } </style> </head> <body> <script type="text/javascript" src="../jquery-1.8.0.js"> </script> <p>动画队列的长度是:<span></span></p> <div></div> <script type="text/javascript"> var div = $("div"); function runIt() { // 第1个动画:显示出来 div.show("slow"); // 第2个动画:自动动画,水平左移300px div.animate({left:'+=300'},2000); // 第3个动画:卷起来 div.slideToggle(1000); // 第4个动画:放下来 div.slideToggle("fast"); // 第5个动画:自动动画,水平右移300px div.animate({left:'-=300'},1500); // 第6个动画:隐藏出来 div.hide("slow"); // 第7个动画:显示出来 div.show(1200); // 第8个动画:卷起来,动画完成后回调runIt div.slideUp("normal", runIt); } // 控制每0.1秒调用一次该方法,该方法用于显示动画队列的长度 function showIt() { var n = div.queue(); $("span").text(n.length); setTimeout(showIt, 100); } runIt(); showIt(); </script> </body> </html>
标签:
原文地址:http://blog.csdn.net/owen_william/article/details/51339850