jquery動畫多個元素

我在頁面上有兩組DOM元素。第一組中的所有元素都帶有類display-element，第二組元素帶有類edit-element。

現在我有一個按鈕（id = edit-button）。當我點擊這個按鈕時，我想要所有的display-elements都淡出，並且所有edit-elements都出現。

我自然也：

$('#edit-button').click(function(){ 
    $('.display-element').fadeOut(300, function() { 
     $('.edit-element').fadeIn(300); 
    }); 
});

，我發現我的驚喜，因爲預計沒有工作。這是發生了什麼事情：只要類display-element淡出的第一個元素，所有edit-elements開始淡入。

現在有任何簡單的方法（也許在我錯過的文檔中的東西）使用我可以擁有所有edit-elements僅在所有display-elements都已淡出後纔開始在褪色？

感謝
JRH

來源

2010-01-09 jrharshath

你是說顯示元素不會同時淡出所有元素？這是應該發生的事情。 – 2010-01-09 13:34:51

我不多說。我知道我觀察到的行爲是預期的行爲。我想知道的是，是否有一些漂亮的jQuery API方法可以幫助我做我想做的事情（並且會繞過我現在正在觀察的行爲）。 – jrharshath 2010-01-09 14:48:37

爲什麼會出現這種情況，是真的嗎？我的意思是，看起來，你是在同一時間開始動畫（畢竟只有一個電話.fadeOut，對吧？）。我猜這是因爲$（）產生一個數組，當你調用.fadeOut時，jQuery遍歷數組並執行它爲每個元素執行的任何操作。從第一個開始。由於回調被「附加」到每個動畫中，因此您會看到第一個回調的可見效果。我想，你可以通過遍歷返回的元素數組來回避這個問題，並確保你只將回調附加到最後一個回調元素上。

$('#edit-button').click(function(){ 
    var display_elements = $('.display-element'); 
    var len = display_elements.length; 
    for (var i = 0; i < len-1; i++) { 
     $(display_elements[i]).fadeOut(300); // no callback 
    } 
    $(display_elements[len-1]).fadeOut(300, function() { 
     $('.edit-element').fadeIn(300); 
    }); // last element - attach callback 
});

對不起，如果代碼是關閉的，我必須承認，我的JavaScript福不是很強:)

來源

2010-01-09 13:24:26 shylent

的解決方案是使用的setTimeout在功能衰落

$('#edit-button').click(function(){ 
    $('.display-element').fadeOut(300); 
setTimeout("$('.edit-element').fadeIn(300);", 300); 
});

了JavaScript函數將推遲在功能上衰落的觸發器300毫秒

來源

2010-01-09 13:31:34 viorel

這將工作大約，但...持續時間不是很可靠，尤其是在毫秒.. – jrharshath 2010-01-09 18:05:00

好了，已經找不到任何「漂亮的API方法」，我決定這一點：

$('#edit-button').click(function() { 
    var displays = $('.display-element'); 
    var counter = 0; 
    var max = displays.length; 
    displays.fadeOut(300, function() { 
     counter++; 
     if(counter>=max) $('.input-element').fadeIn(300); 
    } 
});

這主要是@ shylent的答案，更多的「的JavaScript福」 :)

來源

2010-01-09 14:53:51 jrharshath

啊，是的，這當然更好:) – shylent 2010-01-09 17:57:22

我只是跑了類似的問題，並發現了「一步」回調選項得到所期望的行爲。

step：在動畫的每個步驟之後調用的函數。

向下滾動到演示的步驟使用，你會看到它是如何使你打電話動畫在單個對象上，然後使用步驟在每個步驟來更新您的休息集動畫。這樣，只有在動畫完成時纔會觸發一個回調。

來源

2012-03-19 20:43:29 elDuderino

不幸的是，它不適用於fadeToggle（），所以我用你的櫃檯解決方案爲那些.. 乾杯！ – elDuderino 2012-03-19 20:56:03

jquery動畫多個元素

回答

相關問題