jQuery Rückruf nicht auf fadeOut warten

Question

Es scheint mir der folgende Code diese Ergebnisse produzieren sollte:

mademoiselle 
demoiselle 
mesdemoiselles 

Stattdessen wie „ma“ ausblendet „mes“ blendet die Reihenfolge bei der Herstellung:

mademoiselle 
madesdemoiselles 
mesdemoiselles 

der Code:

<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: ich habe eine leere Spanne festgestellt, dass, wenn ich entfernen entfernt die Fehler gehen macht:

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

Das Problem ist: Der PHP-Code, der dies erzeugt, verwendet die Spannen als Platzhalter. Ich werde sie umstellen, wenn ich muss, aber ich bin neugierig, warum das passiert.

Answer 1

Ok, so habe ich es geschafft, Ihr Problem zu reproduzieren, siehe das Beispiel unter http://jsbin.com/ocaha.

Was passiert ist, dass jQuery sehen kann, dass Ihre leere <span> nicht ausgeblendet werden muss. Daher betrachtet es die Animation als erledigt und wird für 0 ms statt der erwarteten 4000 ms ausgeführt. So beginnt es sofort in der .adds verblassen.

Um dieses Verhalten zu verhindern, würde ich filter alle leeren Elemente aus der Auswahl entfernen. So:

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

Siehe Arbeitsbeispiel unter http://jsbin.com/ovivi.

Answer 2

Change ": leer" auf ": versteckt", wenn nicht funktioniert:

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