jQuery richiamata non in attesa sulla fadeOut
Domanda
Mi sembra il seguente codice dovrebbe produrre questi risultati:
mademoiselle
demoiselle
mesdemoiselles
Invece, come "ma" scompare, "mes" svanisce nel fare la sequenza:
mademoiselle
madesdemoiselles
mesdemoiselles
Il codice:
<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: ho trovato un arco vuoto che se tolgo rende il bug andare via:
<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="remove"></span><span class="add">s</span>
Il problema è: Il codice php generare questo sta usando le campate come segnaposto. Io str_replace loro se devo, ma io sono curioso di sapere perchè questo sta accadendo.
Soluzione
Ok, così sono riuscito a riprodurre il problema vedere l'esempio a http://jsbin.com/ocaha .
Quello che sta succedendo è che jQuery può vedere che il vostro <span>
vuoto non ha bisogno di essere sbiadito. Perciò si considera l'animazione fatta ed esegue per 0 ms invece delle 4000ms attesi. Così inizia immediatamente a dissolvenza in tutti del .adds
.
Per evitare questo problema, avrei filtrare distanza tutti gli elementi vuoti dalla selezione. In questo modo:
$(document).ready(function() {
$(".remove")
.filter(function(){ return ! $(this).is(":empty"); })
.fadeOut(4000, function(){
$(".add").fadeIn(5000);
});
});
Si veda l'esempio lavorando a http://jsbin.com/ovivi .
Altri suggerimenti
Modifica ": Vuoto " a ": nascosto ", se non funziona:
$(document).ready(function() {
$(".remove")
.filter(function(){ return ! $(this).is(":hidden"); })
.fadeOut(4000, function(){
$(".add").fadeIn(5000);
});
});