jQueryコールバック待たずにfadeOut

Question

ていて思ったのは、以下のコードをもたらすこれらの結果は:

mademoiselle
demoiselle
mesdemoiselles

代わりに、"ma"は薄れ、"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のコード生成本に及ぶとプレースホルダで実装する。まstr_replaceしばしていますが、私はなぜこのことが起こっているのです。

Answer 1

[OK]を、ので、私は http://jsbin.com/ocahaするでの例を参照してくださいあなたの問題を再現するために管理しましたます。

何が起こっていることはjQueryのあなたの空<span>がフェードアウトする必要がないことを見ることができるということです。そのためには、アニメーションが完了とみなして、代わりに予想4000msのは0msのために実行されます。だから、すぐに.addsのすべてにフェージングを開始します。

この動作を回避するには、Iだろうフィルタは離れ選択からすべての空の要素をを。このように：

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

http://jsbin.com/oviviするで働い例を参照してください。

Answer 2

変更:空"を":隠れた"作業をしない:

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