jquery - 使用 jquery 同步排列多个效果

Question

是否有更易读的方法来对同步执行的多个异步效果进行排队？

var element1 = $('#div1');
var element2 = $('#div2');

$(element2).hide();
$(element1).on('click',function(){   
    $(element1).fadeOut(1000,function(){
        $(element2).fadeIn(1000, function(){
            $(element2).hide();
            alert('hello');
        });
    });
}); 

Answer 1

如果您使用基于 promise 的系统，您可以防止更深层次的嵌套效应。

$.when(
    $(element1).fadeOut(1000)
).then(function () {
    return $(element2).fadeIn(1000);
}).then(function () {
    return $(element2).hide();
}).then(function () {
    return $(element1).fadeIn(1000);
}).then(function () {
    return $(element1).fadeOut(1000);
});

演示:http://jsfiddle.net/tYhNq/1

您会注意到这使得更改动画的顺序变得非常容易。

“技巧”是 $.when() method返回与第一个动画关联的 Promise 对象，因此您可以链接一堆 .then()调用，注意每个 then() 回调应该返回其动画的结果。

当然，您可以直接在同一元素上链接动画，例如.fadeIn(100).fadeOut(100)...