jquery的queue方法

queue:

queue主要用于给元素上的函数队列(默认名为fx)添加函数(动画效果),
这样dequeue就可以取出并执行函数队列中的第一个函数(即最先进入函数队列的函数),
delay则可以延迟元素上函数队列的执行。

jquery的动画效果,如animation()、show()、slideUp()、fadeIn()等在我看来它的效果就是用queue给fx队列添加一个函数,然后用dequeue调用了它。

queue相关用法:

.queue(queueName):元素上的函数队列

.queue(queueName,newQueue):用newQueue替换掉queueName,所以.queue(queueName,[])即为停止动画。

.queue(queueName,callback):queueName执行完后的回调函数,它会忽略后续queueName的动画函数

.clearQueue(queueName):清空(剩余)函数队列,正在执行的那个函数会继续

.dequeue(queueName):取出并执行函数队列中的第一个函数

.delay(time,queueName):过time(单位为毫妙)后才执行queueName中的函数

注:以上忽略queueName是即为默认的‘fx'

.stop()或.stop(false):跳过正在执行的那个函数,立马运行下一个动画函数

.stop(true):立即停止动画

.stop(false,true):立即跳到当前函数的结束状态,开始执行下一个函数。

但是stop()只能清空动画队列,不能清空所有通过 .queue() 创建的队列(clearQueue可以)。

animation中也用到了queue:
.animation(params,options):
params::一组包含作为动画属性和终值的样式属性和及其值的集合
options:动画的额外选项。如常用的有:
duration/speed - 设置动画持续的时间;
easing - 规定要使用的 easing 函数,jquery只提供了swing(默认值)和linear,要用别的需要下载插件,
可在http://james.padolsey.com/demos/jquery/easing/查看各种效果;
callback - 规定动画完成之后要执行的函数;
queue - 布尔值。指示是否在效果队列中放置动画,默认值为true。如果为 false,则动画将立即开始(如果当前有正在执行的动画函数,则它会与之同时执行)

来看看实例练习:

参考jQuery动画高级用法(上)——详解animation中的.queue()函数

我们知道如果这样:

实例练习0:

$('#id1').fadeOut('slow').fadeIn('slow');

结果是:id1会先消失,然后再出现。

若要达到先消失,然后再另一个div里出现的效果,如果这样写:

实例练习1:

$('#id1').fadeOut('slow').appendTo($('#rightC')).fadeIn('slow');
 
id1
 

结果是:id1先append,然后fadeOut,再fadeIn;

为什么没有按代码书写的顺序执行呢?

原因是元素上的非动画函数(如改变css或是append等)就是会自动先于动画函数执行。
为了改变这种情况,我们可以人为的把非动画函数也加入函数队列,然后执行它就可以了。
修改为: 

实例练习2:

$('#id1').fadeOut('slow')
         .queue(function(){$(this).appendTo($('#rightC);})
         .fadeIn('slow');

测试一下:

 
id1
 

结果id1消失了,通过查看源代码可以发现append也执行了,但是fadeIn却没有执行,为什么呢?看前面的“queue相关用法”就知道了。

怎样修改能达到预期效果呢?

试试下面这样:

实例练习3:

$('#id1').fadeOut('slow')
         .queue(function(){$(this).appendTo($('#rightC')).dequeue();})
         .fadeIn('slow');

测试一下:

 
id1
 

 结果是:表现正常。

如果这样呢:

实例练习4:

$('#id1').fadeOut('slow')
         .queue(function(){$(this).appendTo($('#rightC')).dequeue();})
         .fadeIn('slow')
         .fadeOut('slow');

继续测试:

 
id1
 

 结果也是与预期效果一致,fadeIn结束后即使没有.dequeue(),后一个动画函数也会自己执行。

再来看另一个实例:

实例:
同样来自jQuery动画高级用法(上)——详解animation中的.queue()函数

一个div样式为:
#object{position:absolute;200px;height:200px;top:100px;left:0;background:blue;}

现在要达到这样的效果:
在2s内top由默认的100px均匀变为60px,并且在那2s的后1s内opacity由默认的1慢慢变为0。

我首先想到的是:

实例练习5:

$('#object').animate({top:'-=20'},1000)
            .animate({top:'-=20',opacity:0},1000);

      

object

结果:在第1s到第2s之间有明显的停顿,整体的向上移动并不是匀速的。

自然修改成下面这样:

实例练习6:

$('#object').animate({top:'-=20'},{duration: 1000, easing: 'linear'})
   .animate({top:'-=20',opacity:0},{duration: 1000, easing: 'linear'});

      

object

 结果:正常了。

换一种方法:
top不拆成两部分,而是设置一秒以后同时运行opacity。

实例练习7:

$("#object")
.delay(1000)
.queue(function() {
    $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();
})
.animate({top: "-=40"}, {duration: 2000});

      

object

结果是:1s以后同时开始了opacity和top,这不符合要求。

原因很容易理解:delay针对的是‘fx',queue是立马添加函数成员到'fx’并运行,animate也是'fx'中的成员。所以为了仅仅delay变化透明度的动画效果,必须把它和'fx'区分开来。

实例练习8:

$("#object")
.delay(1000,'fade')
.queue('fade',function() {
    $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();
})
.animate({top: "-=40"}, {duration: 2000});

      

object

 结果:立马执行top,但始终没有执行opacity。

修改为:

实例练习9:

$("#object")
.delay(1000,'fade')
.queue('fade',function() {
    $(this).animate({opacity:0},{duration: 1000, queue: false}).dequeue();
})
.dequeue('fade')
.animate({top: "-=40"}, {duration: 2000});

      

object

 结果:正常了。

 而且如果去掉.queue()里面的.dequeue()(实例练习10),表现依然正常。

对比实例练习7(执行了.queue里面的函数)和实例练习8(没有执行.queue()里面的自定义函数),可以发现:

.queue('fx',callback)可以自己执行callback,而.queue('yourOwnName',callback)则需要手动执行.dequeue('yourOwnName');

其实并不是上面说的这样,而是因为fx中的第一个函数总是会自动执行,不管是通过.queue()还是.animate()方式添加进去的,只是queue会阻止后续fx函数成员。而自定义的成员列表.queue('yourOwnName',callback)都需要手动执行

可以通过实例练习0、2、4和下面这些个例子验证:

$('#id1').queue(function(){$(this).appendTo($('#rightC'));})
         .fadeOut('slow') 
         .fadeIn('slow');  //仅仅append
$('#id1').queue(function(){$(this).appendTo($('#rightC')).dequeue();})
         .fadeOut('slow') 
         .fadeIn('slow');  //按照append、fadeOut、fadeIn一次发生
$('#id1').queue(function(){$(this).appendTo($('#rightC'));})
         .dequeue()        //执行下一个函数成员
         .fadeOut('slow') 
         .fadeIn('slow');  //按照append、fadeOut、fadeIn一次发生
$('#id1').fadeOut('slow') 
         .queue(function(){$(this).appendTo($('#rightC'));})
         .dequeue()
         .fadeIn('slow');  //按照fadeOut、append、fadeIn一次发生

 对比实例练习10(执行了.queue后面的函数)和实例练习2(没有执行.queue后面的函数),可以发现原因:

.queue带queueName参数时默认会忽略queueName后续函数,不带这个参数就是忽略fx,而后面的fadeIn就是添加到fx,所以实例练习2中后面left没有执行。
而实例练习10中只忽略了‘fade’,而后面的animate是添加到fx的,二者不影响。 

一些关于自定义函数列表的练习:

$('#object')
.queue('fade',function() {
      $(this).animate({left: "+=100"},{duration: 1000}).dequeue('fade'); })
.animate({top: "-=40"}, {duration: 2000});//仅仅运行了animate
$("#object")
.delay(1000,'fade')
.queue('fade',function() {
    $(this).animate({left: "+=100"},{duration: 1000, queue: false});})
.dequeue('fade')
.queue('fade',function() {
    $(this).animate({opacity:0},{duration: 1000});})  //不会执行
.animate({top: "-=40"}, {duration: 2000});
//一开始执行top,经过1000ms后同时执行left。如果left中queue:true,则一开始执行top,经过1000ms后本应该要执行left,但因为要排队,所以left会等到top结束后再执行。
$("#object")
.delay(3000,'fade')
.queue('fade',function() {
    $(this).animate({left: "+=100"},{duration: 1000, queue: false}).dequeue('fade'); })
.dequeue('fade')
.queue('fade',function() {
    $(this).animate({opacity:0},{duration: 1000});})  
.animate({top: "-=40"}, {duration: 2000});
//一开始执行top,经过2000ms后top完毕,等1000ms,在第3s的时候开始同时执行left和opacityt(如果left的queue:true,opacity:false效果也是一样的)。
//如果在left中设置queue:true,则在第3s时先开始left,然后再opacity。

另一种常用的用法是:把所有的动画效果按发生顺序集中写一个数组中。

var func=[
  function(){
    $("#id1").animate({left: "+=100"},1000 ,deq);
  },
  function(){
    $("#id1").delay(2000);
    $("#id1").animate({top: "+=50"},1000 ,deq);
  },
  function(){
     $("#p1").animate({height: "+=100"},1000 );
  } 
];
$('.divC').queue('myanimations',func); 
function deq(){$('.divC').dequeue();}
deq();
原文地址:https://www.cnblogs.com/yigeqi/p/3875638.html