jQuery的回調不會等待淡出

在我看來，下面的代碼應該產生以下結果：jQuery的回調不會等待淡出

mademoiselle 
demoiselle 
mesdemoiselles

相反，如「馬」淡出「MES」淡入使序列：

mademoiselle 
madesdemoiselles 
mesdemoiselles

代碼：

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="add">s</span> 

$(document).ready(function() { 
    $(".remove").fadeOut(4000,function(){ 
     $(".add").fadeIn(5000);  
    }); 
});

編輯：我發現了一個空的跨度，如果我刪除，使錯誤消失：

<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="remove"></span><span class="add">s</span>

問題是：生成此代碼的php代碼使用跨度作爲佔位符。如果必須，我會替換它們，但我很好奇爲什麼會發生這種情況。

來源

2009-11-05 Stephane

樣品產生預期的行爲，我在Safari 4.0.3和FF 3.5。你測試了哪些瀏覽器？ – outis 2009-11-05 03:03:34

您使用的瀏覽器是什麼，我已經在Firefox中試過了，它可以像您期望的那樣工作。 – Deeksy 2009-11-05 03:06:29

我嘗試過FF3.05和Safari 4.03 它必須是頁面上的其他內容。我需要把jQuery放在腦海中嗎？ – Stephane 2009-11-05 03:42:49

好吧，所以我設法重現您的問題看到http://jsbin.com/ocaha的例子。

發生什麼事情是，jQuery可以看到你的空<span>不需要淡出。因此它認爲動畫完成並執行0ms而不是預期的4000ms。所以它立即開始在.adds的全部褪色。

爲了防止這種行爲，我將filter從選擇的所有空元素。像這樣：

$(document).ready(function() { 
    $(".remove") 
       .filter(function(){ return ! $(this).is(":empty"); }) 
       .fadeOut(4000, function(){ 
    $(".add").fadeIn(5000); 
    }); 
});

請參閱工作示例http://jsbin.com/ovivi。

來源

2009-11-05 19:24:37

驚人的幫助！謝謝！ – Stephane 2009-11-06 14:30:35

變化「：空」到「：隱藏」如果不工作：

$(document).ready(function() { 
    $(".remove") 
       .filter(function(){ return ! $(this).is(":hidden"); }) 
       .fadeOut(4000, function(){ 
    $(".add").fadeIn(5000); 
    }); 
});

來源

2012-12-20 16:13:08 gleenk

jQuery的回調不會等待淡出

回答

相關問題