jQuery zwrotna nie czekając na fadeOut

Question

Wydaje mi następujący kod powinien produkować te wyniki:

mademoiselle 
demoiselle 
mesdemoiselles 

Zamiast tego, jak „ma” znika „mes” zanika w podejmowaniu sekwencję:

mademoiselle 
madesdemoiselles 
mesdemoiselles 

Kod:

<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: Znalazłem pusty przedział, że jeśli usunąć błąd sprawia, że ​​odejdzie:

Problem polega na tym, że kod php generujący to używa przęseł jako symboli zastępczych. Zamierzam je zastąpić, jeśli będę musiał, ale jestem ciekawy, dlaczego tak się dzieje.

Answer 1

Dobrze, udało mi się odtworzyć Twój problem, zobacz przykład pod adresem http://jsbin.com/ocaha.

Co to jest, że jQuery widzi, że twój pusty <span> nie musi być wygaszony. Dlatego uważa, że ​​animacja została wykonana i jest wykonywana przez 0 ms zamiast oczekiwanych 4000 ms. Więc natychmiast zaczyna znikać w wszystkie z .adds.

Aby temu zapobiec, chciałbym filter odrzucić wszystkie puste elementy z zaznaczenia. W ten sposób:

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

Zobacz przykład pracy pod numerem http://jsbin.com/ovivi.

Answer 2

Change ": pusty" do ": ukryty" jeśli nie działa:

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