JQuery之学“queue（）”+"dequeue"

queue()方法

queue(element,[queuename(默认名为"fx")]);

使用说明：为指定元素添加执行的函数队列。

适用于：animate动画，以及settimeout等情况中。

dequeue([queuename(默认名为"fx")]);

使用说明：把指定的元素的当前队列的函数执行完毕并移除，这样就可以继续执行其他的函数或队列。

适用于 ：queue(function(){

                    //执行的函数，

                    $(elemet).dequeue();//执行当前的队列，完毕后移除，继续下一个队列

                });

测试代码+图示：

 
 
  <script type="text/javascript" src="/jquery/jquery.js"></script>



    我是在queue中加dequeue的
    我是在queue没有加dequeue的
    
   
   

    
    A
   
   
    
   
   

    
    B
   
   
   
    <script>
    
    var Adiv = $("div").eq(0),
        Bdiv = $("div").eq(1);
        
        
    $("#A").click(function(){
        Adiv .show("slow");
        Adiv .animate({left:'+=200'},2000);
        Adiv .queue(function () {
            $(this).addClass("newcolor");
            $(this).dequeue();
        });
        Adiv .animate({left:'-=200'},500);
        Adiv .queue(function () {
            $(this).removeClass("newcolor");
            $(this).dequeue();
        });
        Adiv .slideUp();
    });
    
    $("#B").click(function () {
        Bdiv .show("slow");
        Bdiv .animate({left:'+=200'},2000);
        Bdiv .queue(function () {
            $(this).addClass("newcolor");
            //删除了dequeue()
        });
        Bdiv .animate({left:'-=200'},500);
        Bdiv .queue(function () {
            $(this).removeClass("newcolor");
            $(this).dequeue();
        });
        Bdiv .slideUp();
    });
    
    
    </script>
   

我对于queue（）方法的理解：

   我认为它适合用在一连串的动画执行中，过去我的动画执行最大的问题，就是在指定的时间内，该函数没有按预期的执行，或者说，函数提早的执行，执行的顺序很混乱。

   但是，queue和dequeue的配合，却可以很完美的执行，不用担心某个函数提早执行或未执行。

   就相当于，你只需要把你想要的效果的先后顺序想好，然后利用queue把他们依次方法队列中，然后在每个queue中添加dequeue，这样就可以很好的控制你的队列，不会担心有函数会抢队，或插队。