jQuery richiamata non in attesa sulla fadeOut

Question

Mi sembra il seguente codice dovrebbe produrre questi risultati:

mademoiselle
demoiselle
mesdemoiselles

Invece, come "ma" scompare, "mes" svanisce nel fare la sequenza:

mademoiselle
madesdemoiselles
mesdemoiselles

Il codice:

<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);      
   });
});

Edit: ho trovato un arco vuoto che se tolgo rende il bug andare via:

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

Il problema è: Il codice php generare questo sta usando le campate come segnaposto. Io str_replace loro se devo, ma io sono curioso di sapere perchè questo sta accadendo.

Answer 1

Ok, così sono riuscito a riprodurre il problema vedere l'esempio a http://jsbin.com/ocaha .

Quello che sta succedendo è che jQuery può vedere che il vostro <span> vuoto non ha bisogno di essere sbiadito. Perciò si considera l'animazione fatta ed esegue per 0 ms invece delle 4000ms attesi. Così inizia immediatamente a dissolvenza in tutti del .adds.

Per evitare questo problema, avrei filtrare distanza tutti gli elementi vuoti dalla selezione. In questo modo:

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

Si veda l'esempio lavorando a http://jsbin.com/ovivi .

Answer 2

Modifica ": Vuoto " a ": nascosto ", se non funziona:

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