摘要:当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。
jQuery 动画队列
当在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]):清空动画函数队列中的所有动画函数。
举个例子:
<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>
本文由职坐标整理发布,学习更多的jQuery相关知识,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号