jQuery里面的动画队列
参数 说明
element 检查附加列队的DOM元素
queueName 字符串值,包含序列的名称。默认是 fx, 标准的效果序列
newQueue 替换当前函数列队内容的数组
callback() 要添加进队列的函数
方法 概述
queue(element,[queueName]) 显示或操作在匹配元素上执行的函数队列
dequeue([queueName]) 从队列最前端移除一个队列函数,并执行他
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
<br/>
<button class="btn">按钮</button>
//对按钮集合进行遍历
var speed=500;
animate();
function animate(){
$(".btn").each(function(index){
var delay=index*speed;
$(this).delay(delay).animate({
width:(index+1)*60
},speed);
}).last().queue(function(){
//清除动画队列
$('.btn').clearQueue().css('width','50px');
animate();
})
}
$('.btn').animate({width:200},200);
$('.btn').animate({height:200},200);
$('.btn').queue(function(){
console.log("当前动画执行完成");
$(this).dequeue();
});
$('.btn').animate({width:50},500);
$('.btn').animate({height:50},500);
//默认动画队列fx
var animateArr=[
function(){
$(this).animate({width:200},500,fun);
},
function(){
$(this).animate({height:200},500,fun);
},
function(){
$(this).animate({width:50},500,fun);
},
function(){
$(this).animate({height:50},500,fun);
}
]
$('.btn').queue('myanimate', animateArr);
var fun=function(){
$('.btn').dequeue('myanimate');
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。