La devolución de llamada de jQuery no espera el desvanecimiento

Question

Me parece que el siguiente código debería producir estos resultados:

mademoiselle
demoiselle
mesdemoiselles

En cambio, a medida que "ma" se desvanece, "mes" se desvanece al formar la secuencia:

mademoiselle
madesdemoiselles
mesdemoiselles

El código:

<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);      
   });
});

Editar:Encontré un espacio vacío que, si lo elimino, el error desaparece:

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

El problema es:El código PHP que genera esto utiliza los intervalos como marcadores de posición.Los str_replace si es necesario, pero tengo curiosidad por saber por qué sucede esto.

Answer 1

Ok, así que me las arreglé para reproducir su problema de ver el ejemplo en http://jsbin.com/ocaha .

Lo que pasa es que jQuery se puede ver que su <span> vacío no necesita ser desvanecido. Para ello se considera la animación realiza y ejecuta de 0 ms en lugar de los esperados 4000ms. Por lo que de inmediato empiece a aparecer todos de la .adds.

Para evitar este comportamiento, me filtrar de distancia todos los elementos vacíos de la selección. De esta manera:

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

Vea ejemplo de trabajo en http://jsbin.com/ovivi .

Answer 2

Cambiar ":vacío" a ":oculto" si no funciona:

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