jQuery的推遲和CSS3過渡

對於Ajax調用我對那些在一個特定的順序調用不同的元素一些轉變。在閱讀關於jQuery延期時，我認爲這就是我正在尋找的，但我似乎無法讓它工作。jQuery的推遲和CSS3過渡

我做了一個簡單的jsfiddle給一個想法，我想archieve什麼： http://jsfiddle.net/pe5Bb/1/

我想這個問題是CSS3過渡。所有功能都從一開始就執行。但是，當我在轉換回調中放置一個console.log它似乎工作，但該函數仍然執行之前。

function box2() { 
var deferred = $.Deferred(); 

if ($('#box2').hasClass('active')) { 
    $('#box2').css({opacity:0}).bind(transitionend, function(){ 
     console.log("css3 done"); 
     deferred.resolve(); 
     $('#box2').unbind(transitionend); 
    }); 
} else { 
    deferred.resolve(); 
} 

return deferred.promise();

}

我想實現的是，我可以（爲過渡到新的內容與國）創建多個功能，我可以告訴在什麼樣的順序，他們應該被調用。在這個例子中，我使用css3轉換，有時通過添加/刪除類來調用。如果在這種情況下推遲使用不正確，我想從中聽到。

來源

2013-07-06 paul_ngc

我認爲這個問題只是你打電話做的方式。在解決承諾時，您應該傳遞您想要執行的功能。事情是這樣的：

var promise = box(); 
promise.done(box2);

如果你想鏈一堆電話，你可以做這樣的：

var promise = box(); 
promise.done(function() { 
    promise = box2(); 
    promise.done(function() { 
     scrollTo(); 
    }); 
});

jsfiddle link

或者，你可以使用then的方法，但你需要調用它像這樣：

var promise = box(); 
promise.done().then(box2).done().then(scrollTo);

來源

2013-07-06 19:42:44

感謝您的回答。這工作。我還是有點困惑了。那麼（），因爲在http://api.jquery.com/deferred.then/它說：deferred.then（doneFilter [，failFilter] [，progressFilter]）。它和done（）是一樣的嗎？ –

我其實沒有看那個。這種方式很容易，但是你錯誤地調用了它。看到我更新的答案。順便說一句，如果你對我的答案感到滿意，我會很高興得到讚揚。 :) –

感謝您的更新答案！我更喜歡那麼，因爲它看起來更具可讀性，但也因爲我明白那將永遠被稱爲。所以當一個錯誤彈出時，一切仍然繼續，這給了我一個'安全'的感覺。 Upvoted你的答案:) –

jQuery的推遲和CSS3過渡

回答

相關問題