浅谈jquey 中queue队列

阅读更多

首先来一张w3c对queue用法介绍

 

恩，好像是这个样子，在queue出场之前先谈谈jquery链式操作，举个栗子:

$('#div1').animate({
                  top:'50px',
                  left:'100px'
            },'slow').css({
                 width:'300px',
                 height:'300px'
            }).fadeOut();

 这段代码很简单，那么它的效果是怎样的呢？首先div1同时向上移动50px，向左移动100px--->宽度和高度变为300px----->最后消失...

    真的是这样吗？动手运行一下，细心的童鞋就会发现 它先宽度和高度变为300px，然后才是向上向左移动，最后消失。原因在于jquery链式操作队列，只有动画才被依次加入到这个队列中去，像toggle，show，hide，fadeIn，fadeOut...这些动画效果才会被按顺序依次执行。问题来了，非动画函数也想加入这个队列依次执行该怎么办？

   queue闪亮登场，duang

$('#div1').animate({
                  top:'50px',
                  left:'100px'
            },'slow')
.queue(function(){
      $(this).css({
                 width:'300px',
                 height:'300px'
            });
     //保证余下队列继续执行
    $(this).dequeue();
}).fadeOut();

 这样就会按照我们的想法运动了。。

顺便提一下dequeue,当调用 .dequeue() 时，会从序列中删除下一个函数，然后执行它。该函数反过来会（直接或间接地）引发对 .dequeue() 的调用，这样序列才能继续下去。

不是总结的总结:

1，用queue把函数加入队列（通常是函数数组）
2，用dequeue将函数数组中的第一个函数取出，并执行(用shift()方法取出并执行）

 

 

• 
• 大小: 31.2 KB

• 查看图片附件