使用jquery同步排列多个效果

是否有更具可读性的方法来对同步执行的许多异步效果进行排队

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

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

---

如果使用基于承诺的系统，则可以防止更深的嵌套效应

$.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);
});

演示：

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

“诀窍”是返回与第一个动画相关联的promise对象，这样您就可以链接一系列调用，注意每个

then（）

回调应该返回其动画的结果

当然，您可以在同一元素上直接链接动画，例如，

.fadeIn（100）.fadeOut（100）.

此问题称为“”。在NodeJS中，您可以使用模块选项“退出”

我在jQuery中没有找到对应选项

我的建议是为每个效果创建一个函数，如下所示：

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

$(element2).hide();

var finished = function () { console.log(":-)"); }
var hide = function () { element2.hide(); finished(); }
var fadeIn = function () { element2.fadeIn(1000, hide); }
var clicked = function () { element1.fadeOut(1000, fadeIn); }

$(element1).on('click', clicked);

---

这难道不容易阅读吗？如果你想把20个效果排成一行，就不需要了。@Zim84这就是我提出这个问题的原因。作为一个完整的旁白：

element1

和

element2

在你的例子中已经是jQuery对象了，所以不需要将它们再次包装在

$（）

@Elisa中，这是正确的吗？我希望在开始时使用$.when，并删除.promise，比如：$.when（$（element1.fadeOut（1000））等等。。。我想这更清楚了，你是对的<代码>$。when（）更整洁，如中所示。（

.promise（）

只是第一个想到的方法。）您能用$.when修改您的解决方案吗？然后我将其标记为答案：）仅针对其他人…没有人需要阅读注释…好的，完成了，将解释稍作修改，以便（我希望）理解更改后的代码。