jQuery Rückruf warten nicht auf fadeOut
Frage
Es scheint mir der folgende Code sollte diese Ergebnisse erzeugen:
mademoiselle
demoiselle
mesdemoiselles
Stattdessen wie „ma“ ausblendet „mes“ blendet die Reihenfolge bei der Herstellung:
mademoiselle
madesdemoiselles
mesdemoiselles
Der 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: Ich fand eine leere Spanne, wenn ich entfernen Sie den Fehler macht weggehen:
<span class="remove">ma</span><span class="add">mes</span>demoiselle<span class="remove"></span><span class="add">s</span>
Das Problem ist: Der PHP-Code zu erzeugen diese die Spannweiten als Platzhalter verwendet. Ich werde sie str_replace, wenn ich muss, aber ich bin neugierig, warum dies geschieht.
Lösung
Ok, so habe ich es geschafft, Ihr Problem siehe Beispiel unter http://jsbin.com/ocaha zu reproduzieren .
Was passiert, ist, dass jQuery kann sehen, dass Ihre leeren <span>
nicht ausgeblendet werden muss. Dafür ist es nach Ansicht der Animation gemacht und führt für 0 ms statt der erwarteten 4000ms. So ist es sofort beginnt Verblassen in alle des .adds
.
Um dieses Verhalten zu verhindern, würde ich filtert entfernt alle leere Elemente aus der Auswahl. Wie folgt aus:
$(document).ready(function() {
$(".remove")
.filter(function(){ return ! $(this).is(":empty"); })
.fadeOut(4000, function(){
$(".add").fadeIn(5000);
});
});
Siehe Beispiel arbeitet unter http://jsbin.com/ovivi .
Andere Tipps
Change ": leer " auf ": versteckt ", wenn nicht funktioniert:
$(document).ready(function() {
$(".remove")
.filter(function(){ return ! $(this).is(":hidden"); })
.fadeOut(4000, function(){
$(".add").fadeIn(5000);
});
});