如何在jQuery的动画，无堆叠回调？(How do I animate in jQuery wit

比方说，我有三个div的，我想每个动画一旦前一个完成。目前，我写这篇文章：

$('div1').fadeOut('slow', function() {
    $('div2').fadeOut('slow', function() {
        $('div3').fadeOut('slow');
    });
});

这是丑陋的，但管理。

现在想象一下，我需要一个发生在其他不同的元素后，10个不同的动画。突然，代码变得如此笨拙，这是非常难以管理...

下面是伪代码就是我希望做的：

$('div1').fadeOut('slow' { delay_next_function_until_done: true } );
$('div2').fadeOut('slow' { delay_next_function_until_done: true } );
$('div3').animate({ top: 500 }, 1000 );

如何实现这一目标？

Answer 1:

如果您使用的是最新的jQuery的版本，使用动画承诺：

$('div1').fadeOut('slow').promise().pipe(function() {
    return $('div2').fadeOut('slow');
}).pipe(function() {
    return $('div3').animate({ top: 500 }, 1000 );
});

你可以把它通用：

$.chain = function() {
    var promise = $.Deferred().resolve().promise();
    jQuery.each( arguments, function() {
        promise = promise.pipe( this );
    });
    return promise;
};

var animations = $.chain(function() {
    return $('div1').fadeOut('slow');
}, function() {
    return $('div2').fadeOut('slow');
}, function() {
    return $('div3').animate({ top: 500 }, 1000 );
});

$.when( animations ).done(function() {
    // ALL ANIMATIONS HAVE BEEN DONE IN SEQUENCE
});

还有很多功能关门，而是说的的JavaScript的本质。不过，既然你避免回调“盗梦空间”这是更自然和更大量的使用Deferreds /承诺灵活。

Answer 2:

我这样做，用这种方法，你可以把所有的div，只要你想，只需要添加或删除元素列表中的VAR，你也可以重新排序，你不必担心延迟时间。

var list = [ '#div1', '#div2', '...' ];
var i = 0;
function fade(cb) {
    if (i < list.length) {
        $(list[i]).fadeOut('slow', function() {
            i++;
            fade(cb);
        });
    } else {
        cb && cb();
    }
}
fade();

当过程结束，你还可以添加一个回调

fade(function(){alert('end')});

演示

Answer 3:

当曾经完成的功能或回调得到嵌套太深或代码是越来越重复了一遍又一遍，我倾向于认为与具有公共功能的数据表解决方案：

function fadeSequence(list) {
    var index = 0;
    function next() {
        if (index < list.length) {
            $(list[index++]).fadeOut(next);
    }
    next();
}

var fades = ["div1", "div2", "div3", "div4", "div5"];
fadeSequence(fades);

而且，如果你想要一个不同类型的动画的一些项目，你可以创建一个描述了每个连续的动画应该是对象的数组。因为需要你可以把尽可能多的细节对象在数组中。你甚至可以混用动画与其他同步jQuery的方法调用是这样的：

function runSequence(list) {
    var index = 0;
    function next() {
        var item, obj, args;
        if (index < list.length) {
            item = list[index++];
            obj = $(item.sel);
            args = item.args.slice(0);
            if (item.sync) {
                obj[item.type].apply(obj, args);
                setTimeout(next, 1);
            } else {
                args.push(next);
                obj[item.type].apply(obj, args);
            }
        }
    }
    next();
}

// sequence of animation commands to run, one after the other
var commands = [
    {sel: "#div2", type: "animate", args: [{ width: 300}, 1000]},
    {sel: "#div2", type: "animate", args: [{ width: 25}, 1000]},
    {sel: "#div2", type: "fadeOut", args: ["slow"]},
    {sel: "#div3", type: "animate", args: [{ height: 300}, 1000]},
    {sel: "#div3", type: "animate", args: [{ height: 25}, 1000]},
    {sel: "#div3", type: "fadeOut", args: ["slow"]},
    {sel: "#div4", type: "fadeOut", args: ["slow"]},
    {sel: "#div1", type: "fadeOut", args: ["slow"]},
    {sel: "#div5", type: "css", args: ["position", "absolute"], sync: true},
    {sel: "#div5", type: "animate", args: [{ top: 500}, 1000]}
];
runSequence(commands);

而且，这里的第二个选项的工作演示： http://jsfiddle.net/jfriend00/PEVEh/

Answer 4:

这样做的一个方法是编写自己的辅助函数，就像这样：

$.fn.sequentialFade = function() {
    if(this.length > 0) {
        var $set = $(this);
        $set.eq(0).fadeOut(function() {
            $set.slice(1).sequentialFade();
        });
    }
}

并使用它像这样：

$('.div1, .div2. .div3').sequentialFade();

http://jsfiddle.net/JpNgv/

Answer 5:

试着这么做：

$( 'div1' ).fadeOut();
$( 'div2' ).delay( 500  ).fadeOut();
$( 'div3' ).delay( 1000 ).fadeOut();

必要时，调整定时

Answer 6:

用这个：

$('#div1, #div2, #div3').each(function(index){
    $(this).delay(1000 * index).hide(1000);
});

如果你可以给<div> SA类：

$('.forHide').each(function(index, value){
    $(this).delay(1000 * index).hide(1000);
});

第一元件淡出1000后* 0 = 以一秒的动画的时候了。
第二元件1000 * 1之后淡出= 与一个第二动画一秒。
第三元素1000 * 2 = 两个秒以一秒的动画之后淡出。
...
...
N元素后1000 * N = N秒以一秒的动画变淡英寸

现场演示

Answer 7:

回调是朋友，不要推走。有办法简化它们。这里是其中之一

$('div1').fadeOut('slow', div2)
function div3() { $('div3').fadeOut('slow'); }
function div2() { $('div2').fadeOut('slow', div3); }

文章来源: How do I animate in jQuery without stacking callbacks?