jQuery动画队列
2018-08-22 本文已影响0人
e81bcd463937
动画队列
- 动画队列可以说是动画执行的一个顺序机制，当我们对一个对象添加多次动画效果时后，添加的动作就会被放入这个动画队列中，按照先进先出的顺序执行.
动画队列机制和执行顺序
- 对于一组元素上的动画效果，有如下两种情况：
- 当在一个animate()方法中应用多个属性时，动画是同时发生的。
- 当以链式的写法应用动画方法时，动画是按照顺序发生的。
- 对于多组元素上的动画效果，有如下情况：
- 默认情况下，动画都是同时发生的。
- 当以回调的形式应用动画方式时，动画是按照回调顺序发生的。
自定义动画
jQuery提供了以下几种方法来操作动画队列。
-
stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。
-
queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。
-
queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。
-
dequeue():执行动画函数队列头的第一个动画函数，并将该动画函数移出队列。
-
clearQueue([queueName]):清空动画函数队列中的所有动画函数。
可选的 callback 参数是动画完成后所执行的函数名称。
<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>
