1. jQuery为我们提供了queue()函数,来把你需要的某些代码插入到某个队列中
$('#test-change1').toggle(function(){
$('#test-object1').hide('slow').queue(function(next){
$('#test-object1').appendTo($('#test-goal1'));
next();
}).show('slow');
},function(){
$('#test-object1').hide('slow').queue(function(next){
$('#test-object1').appendTo($('#test-origin1'));
next();
}).show('slow');
});
2. 自定义队列
$("div").queue("custom", function(next) {
$('div').css({'background':'red'});
next();
});
但就这段代码而已,待你真正添加进网页,并且尝试运行,会发现并非“所见即所得”,压根就不会有任何效果。
修改后:
$("div").queue("custom", function(next) {
$('div').css({'background':'red'});
next();
})
.dequeue("custom"); //this is the key
一般对与dequeue()的定义是“删除队列中最顶部的函数,并且执行它”。我并不赞同用“删除”这个字眼,而是倾向于“取出”,其实这个函数的功能就好像是一个数据结构中队列的指针,待队列中前一个函数执行完后,取下一个队列最顶端的函数。
3. queue: false
$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
$(this).animate({opacity: 0},
{duration: 1000, queue: false});
next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})
前1000毫秒,只有控制高度的“fx”队列执行,而后1000毫秒,控制不透明度的“fader”队列和控制高度的“fx”并行。这里的并行就是queue:false
$('#section3a').slideUp(1000)
.slideDown(1000)
.animate({width: '50px'}, {duration: 1000, queue: false});
4. 获取队列长度
比如用队列名取得匹配元素的长度:
var $queue=$("div").queue('fx');
很明显,就是取得队列名为’fx’的队列,如果想取得长度的话:
var $length=$('div').queue('fx').length;
注意这里的队列长度只是匹配元素还未运行的队列长度,当动画运行完之后,队列长度会自动归为0
替换队列
$('div').queue('fx',function(){
$('div').slideDown('slow')
.slideUp('slow')
.animate({left:'+=100'},4000);
});//定义fx
$('div').queue('fx2',function(){
$('div').slideDown('fast')
.slideUp('fast')
.animate({left:'+=100'},1000);
});//定义fx2
这里定义了两个队列,一个是慢队列,也就是默认的’fx’,另一个是快队列’fx2′
当点击某个按钮时:
$('input').click(function(){
$('div').queue('fx',fx2);
});