rappel jQuery ne pas attendre le fadeOut

Question

Il me semble le code suivant devrait produire ces résultats:

mademoiselle
demoiselle
mesdemoiselles

Au lieu de cela, comme "ma" disparaît, "mes" fades en faisant la séquence:

mademoiselle
madesdemoiselles
mesdemoiselles

Le 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: J'ai trouvé une durée vide que si je supprimer le bug fait disparaître:

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

Le problème est le suivant: Le code php génération est d'utiliser les portées comme des espaces réservés. Je les str_replace si je dois, mais je suis curieux de savoir pourquoi ce qui se passe.

Answer 1

Ok, donc j'ai réussi à reproduire votre problème voir l'exemple http://jsbin.com/ocaha .

Qu'est-ce qui se passe est que jQuery peut voir que votre <span> vide n'a pas besoin d'être estompé. Il considère à cet effet l'animation faite et exécute pour 0ms au lieu des 4000ms attendus. Ainsi, il commence immédiatement à la décoloration tous du .adds.

Pour éviter ce problème, je filtrer loin tous les éléments vides de la sélection. Comme ceci:

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

Voir l'exemple de travail à http://jsbin.com/ovivi .

Answer 2

Change ": vide " à ": caché " si ne fonctionne pas:

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