jquery - 很多回调函数

Question

我有不同的效果。我希望每一个只有在前一个完成后才被执行。当我有 2 或 3 个效果时，回调函数效果很好。当我有很多代码并且每个代码都非常复杂时，问题就来了，代码真的很难阅读和遵循。有更好的方法吗？也许有一种更干净、更简单的方式来呈现代码？

以下是播放示例:http://jsfiddle.net/83xrg/

JQUERY:

$("#blue").click(function() {
    $("#blue").fadeOut(4000, function() {
       $("#red").fadeIn(4000);  
    });
});

HTML:

<div id="blue"></div>
<div id="red"></div>

CSS:

#blue{
    position: absolute;
    top: 150px; left: 150px;
    width:200px; height:200px;
    background-color:blue;
    cursor:pointer;
}

#red{
    position: absolute;
    top:150px; left:150px;
    width:200px; height: 200px;
    background-color:red;
    display:none;
}

Answer 1

您可以使用 Promises(异步回调的替代方法)，jQuery implements .

示例:

var blue = $('#blue');

blue.fadeOut(4000);
blue.promise().done(function(){
    $("#red").fadeIn(4000);            
});