jQuery devolución de llamada no se espera en fadeOut

Question

Me parece el siguiente código debe producir estos resultados:

mademoiselle 
demoiselle 
mesdemoiselles 

En cambio, como "ma" se desvanece, "mes" se desvanece en la toma de 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);  
    }); 
}); 

Edición: he encontrado un lapso vacía que si quito hace que el error desaparezca:

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

El problema es que el código php que genera esto está utilizando los tramos como marcadores de posición. Voy a volver a colocarlos si es necesario, pero tengo curiosidad de por qué esto está sucediendo.

Answer 1

Ok, así que logré reproducir su problema, vea el ejemplo en http://jsbin.com/ocaha.

Lo que está pasando es que jQuery puede ver que su <span> vacío no necesita desaparecer. Por lo tanto, considera que la animación se realizó y se ejecuta durante 0ms en lugar de los 4000ms esperados. Por lo tanto, inmediatamente comienza a desvanecerse en todos del .adds.

Para evitar este comportamiento, eliminaría filter 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); 
    }); 
}); 

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

Answer 2

cambio ": vacío" a ": oculta" si no funciona:

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