javascript - jquery动画队列的自动添加和执行

Question

{代码...} 上面的代码会让前两个动画并行执行, 后续的动画却不会. 由此引发了我的两个问题: 一个动画包括了进入队列和动画执行两个步骤. 诸如$(".test").animate({width:'+=256'},2500);这样添加的动画, 是先把所...

高洛峰 · Answer

按手册说的，animate如果不指定queue参数的话，默认值是true，就是统一把效果加到默认的“fx”队列里（实体引用是 $.fx ）；queue传的参数如果是function的话就是callback，相当于在动画队列的末尾加了个回调，所以才会在最后执行（如果是array的话就是显式构造动画队列）；dequeue的作用是取出动画队列里的东西并执行，所以它才是动画队列执行的关键。
平时一般都喜欢用velocity写动画，jQ的动画其实不怎么碰……
手机换电脑了，补充点代码：

//如果是在 $.fx 队列的中间插东西
$(function() {
    $('#btn').click(function() {
        $(".test")
            .animate({width:'+=256'},2500)
            .animate({height:'+=256'},2500)
            .queue(function(next) { 
                $(this).css({'backgroundColor':'black'});
                next(); //继续往后执行
            })
            .animate({width:'-=256'},2500)
            .animate({height:'-=256'},2500);
     });
});
//如果是在 $.fx 队列的末尾加回调
$(function() {
    $('#btn').click(function() {
        $(".test")
            .animate({width:'+=256'},2500)
            .animate({height:'+=256'},2500)
            .animate({width:'-=256'},2500)
            .animate({height:'-=256'},2500)
            .queue(function() { 
                $(this).css({'backgroundColor':'black'});
                $(this).dequeue();
            });
     });
});
//如果某一步动画想和上一步并发执行
$(function() {
    $('#btn').click(function() {
        $(".test")
            .animate({width:'+=256'},2500)
            .animate({height:'+=256'},2500)
            .animate({width:'-=256'},{duration:2500,queue:false}) //并发执行
            .animate({height:'-=256'},2500);
     });
})

另外手册可以参考这里： http://www.jquery123.com/

PHPz · Answer

个人理解，那不是动画队列，叫函数队列，这样楼主应该懂了吧？

http://www.w3school.com.cn/jq...

http://www.tuicool.com/articl...