jQuery não callback esperando fadeOut

Question

Parece-me o seguinte código deve produzir estes resultados:

mademoiselle
demoiselle
mesdemoiselles

Em vez disso, como "ma" desaparece "show" fades em fazer a seqüência:

mademoiselle
madesdemoiselles
mesdemoiselles

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

Edit: Eu encontrei um espaço vazio que se eu remover faz com que o bug ir embora:

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

O problema é: o código PHP gerando isso é usando os vãos como espaços reservados. Vou str_replace-los se for preciso, mas estou curioso porque isso está acontecendo.

Answer 1

Ok, então eu consegui reproduzir o seu problema ver o exemplo em http://jsbin.com/ocaha .

O que está acontecendo é que jQuery pode ver que o seu <span> vazio não precisa ser desapareceu. Mesmos que considera a animação feito e executado para 0ms em vez dos 4000ms esperados. Por isso, imediatamente começa a desaparecer em todas do .adds.

Para evitar esse comportamento, eu fora todos os elementos vazios da seleção. Como esta:

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

Veja o exemplo trabalhando em http://jsbin.com/ovivi .

Answer 2

Change ": esvaziar " para ": escondida " se não está funcionando:

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