jQuery 动画队列
当在jQuery对象上调用动画方法时，如果对象正在执行某个动画效果，那么新调用的动画方法就会被添加到动画队列中，jQuery会按顺序依次执行动画队列的每个动画。
jQuery提供了以下几种方法来操作动画队列。
-
stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。 -
queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。 -
queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。 -
dequeue():执行动画函数队列头的第一个动画函数，并将该动画函数移出队列。 -
clearQueue([queueName]):清空动画函数队列中的所有动画函数。
举个例子：
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.box {
top: 30px;
position: absolute;
width: 200px;
height: 200px;
background-color: red;
}
body {
position: relative;
}
span {
margin-right: 10px;
}
</style>
</head>
<body>
<span>动画序列剩余</span>
<span class="num">0</span>
<span>部分</span>
<div class="box"></div>
<button class='btn'>点击开始动画</buton>
<script>
function runIt(){
//获取动画队列进度
showIt();
//动画第一部分
$('.box').animate({ left: '100', },1000)
//动画第二部分
$('.box').animate({ width:'400', },1000)
//动画第三部分
$('.box').animate({ left: '0'},1000)
//动画第四部分
$('.box').animate({ width:'200' },1000)
//动画第五部分
$('.box').slideUp(1000)
//动画第六部分
$('.box').slideDown(1000,runIt)
}
function showIt(){
var num = $('.box').queue().length;
//获取动画队列剩余长度
$('.num').text(num);
setTimeout(showIt,1000)
//设置循环更新动画队列的进展
}
$('.btn').on('click',runIt)
//当点击button的时候，开始启动动画
</script>
</body>
</html>
网友评论