js queue dequeue clearQueue stop

 

一、queue( [queueName ], newQueue ) 操作欲执行队列方法

第一个参数是队列名称，不写的话默认是fx

第二个参数可以是一个函数数组，存放所有队列函数，也可以是一个回掉函数，用于向队列中添加新函数

dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function

 

 如果只是轮流移动次数较少，可以使用animate的回调函数来做，一个动画放在另一个动画的回调里边

 $("#block1").animate({left:"+=100"},function() {

 

    $("#block2").animate({left:"+=100"},function() {

        $("#block1").animate({left:"+=100"},function() {

            $("#block2").animate({left:"+=100"},function() {

                $("#block1").animate({left:"+=100"},function(){

                    alert("动画结束");

                });

            });

        });

    });

});

 

 

 

但这种方法当动画较多的时候简直是残忍，此时利用queue和dequeue则显得简单很多：

 

//js code 

 

 

$(function(){

var FUNC = [

                        function () { $("#block1").animate({ left: "+=100" }, aniCB); },

                        function () { $("#block2").animate({ left: "+=100" }, aniCB); },

                        function () { $("#block1").animate({ left: "+=100" }, aniCB); },

                        function () { $("#block2").animate({ left: "+=100" }, aniCB); },

                        function () { $("#block1").animate({ left: "+=100" }, aniCB); },

                        function () { $("#block2").animate({ left: "+=100" }, aniCB); },

                        function () { alert("动画结束") }

                       ];

            $(document).queue("myAnimation", FUNC);

            var aniCB = function () {

                $(document).dequeue("myAnimation");

            }

            

            $("#block1").animate({ left: "+=100" }, aniCB);

});

 

 //html code

 

    body{position:relative;} 

    #block1{position:absolute; top:150px; width:100px; height:100px; background-color:green;}

 

 

    #block2{position:absolute; top:250px; width:100px; height:100px; background-color:red;}

 

    <div id="block1"></div>

 

    <div id="block2"></div>

 

 注：

1，我首先建议建立了一个函数数组，里边是一些列需要依次执行的动画

2，然后我定义了一个回调函数，用dequeue方法用来执行队列中的下一个函数
3，接着把这个函数数组放到document上的myAnimation的队列中（可以选择任何元素，我只是为了方便而把这个队列放在document上）
4，最后我开始执行队列中的第一个函数

 

5，当不要要继续进行接下来动画的时候(比如用户点了某个按钮)，只需要清空那个队列即可。而要增加更多则只需要加入队列即可：

//清空队列

 

$(document).queue("myAnimation",[]);

//加一个新的函数放在最后

$(document).queue("myAnimation",function(){alert("动画真的结束了！")});

 

 这当然也可以用于ajax之类的方法，如果需要一系列ajax交互，每个ajax都希望在前一个结束之后开始，之前最原始的方法就是用回调函数，

但这样太麻烦了。同样利用queue添加队列，每次ajax之后的回调中执行一次dequeue即可。

 

 

 

二、这两个方法主要是为了取消动画

 

clearQueue( [queueName ] ) 将队列中函数清空

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于停止正在进行的动画

queue：正在进行的动画队列名称

clearQueue：默认值为false，是否将队列本身也清空

jumpToEnd：默认值为false，是否立即执行完动画

 

1.这样写不会不会终止动画，只是当前动画执行完后，不会再调用队列中下一个动画（队列被清空了嘛，没有下一个了）

$('#block1').clearQueue('myQueue');

2.立即停止动画

$('#block1').stop();   至于停止动画是暂停还是立即执行完，就学要配置stop()的参数了