jQuery Rückruf warten nicht auf fadeOut

Question

Es scheint mir der folgende Code sollte diese Ergebnisse erzeugen:

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 fand eine leere Spanne, wenn ich entfernen Sie den Fehler macht weggehen:

<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 zu erzeugen diese die Spannweiten als Platzhalter verwendet. Ich werde sie str_replace, wenn ich muss, aber ich bin neugierig, warum dies geschieht.

Answer 1

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

Was passiert, ist, dass jQuery kann sehen, dass Ihre leeren <span> nicht ausgeblendet werden muss. Dafür ist es nach Ansicht der Animation gemacht und führt für 0 ms statt der erwarteten 4000ms. So ist es sofort beginnt Verblassen in alle des .adds.

Um dieses Verhalten zu verhindern, würde ich filtert entfernt alle leere Elemente aus der Auswahl. Wie folgt aus:

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

Siehe Beispiel arbeitet 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);
   });
});