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.
La solution
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 .
Autres conseils
Change ": vide " à ": caché " si ne fonctionne pas:
$(document).ready(function() {
$(".remove")
.filter(function(){ return ! $(this).is(":hidden"); })
.fadeOut(4000, function(){
$(".add").fadeIn(5000);
});
});