$div1.transition({
    transform : "translateX(300px)"
},3000,"linear", function(){
    $div2.transition({
        transform : "translateX(300px)"
    },3000,"linear", function(){
        $div3.transition({
            transform : "translateX(300px)"
        },3000,"linear", function(){
            alert("transition end");
        });
    });
});
 

五、非巢狀式鏈式動畫

相信你也看出來了，巢狀式鏈式動畫對開發人員來說很不友好，稍微一個小小的動畫就有可能巢狀上百行，對於維護和修改極為不利。 所以此處我們引入JQuery的Deferred物件。Deferred物件最早是為AJAX非同步載入所建立的，用於AJAX請求的回撥，讓開發人員從多個AJAX請求的回撥巢狀方法中解脫出來。 而在這裡，我們也可以將其引入到動畫中，以增強動畫的鏈式程式設計效果，簡化開發。 （有關Deferred物件的詳細資料請自行學習，由於脫離本文主題，不在此做詳細介紹） 此處我們先定義兩個方法，這兩個方法的原理分別用到了前面所說的addClass()和JQuery transit，但是它們都有一個共同點，在事件結束時都修改了defer屬性，並將其返回。

//addClass + animation
function addClassAni(element){
    var defer = $.Deferred();
    element.addClass("ani_class").on(animationEnd(),function(){
        defer.resolve();
    });
    return defer;
}
//JQuery transit
function addTransitAni(element){
    var defer = $.Deferred();
    element.transition({
        transform : "translateX(300px)"
    },3000,"linear", function(){
        defer.resolve();
    });
    return defer;
}
 

然後就可以愉快的利用Deferred進行鏈式程式設計啦！

addClassAni($div1).then(function(){
    return addClassAni($div2);
}).then(function(){
    return addTransitAni($div3);
}).then(function(){
    return addTransitAni($div4);
}).then(function(){
    alert("animation end!");
});

此處每一步都會返回一個Deferred物件，下一步操作做什麼要視該Deferred物件的狀態。 同時，如果某些動畫並非要等上一個動畫執行完才執行，那麼只需讓上一步動畫不返回Deferred物件即可。如下：

addClassAni($div1).then(function(){
    return addClassAni($div2);
}).then(function(){
    addTransitAni($div3);
}).then(function(){
    return addTransitAni($div4);
}).then(function(){
    alert("animation end!");
});
 

此處的$div3會與$div4會等$div2動畫完成後共同移動。