"fade-in" Elemente der Liste nacheinander mit jQuery
Baue ich eine portfolio-Seite, die eine Liste von verschiedenen Projekten (in eine ungeordnete Liste). Beim laden der Seite " ich will jedes "li" für "fade-in", einer nach dem anderen. Ich dies erreicht haben, etwa so:
var eT = 0;
$('.everything').hide().each(function() {
$(this).delay(eT).fadeIn('slow');
eT += 200;
});
Das problem, das ich habe ist, dass jedes li eine Klasse (oder mehrere) auf der Grundlage der Art der Arbeit (web, print, etc), die es repräsentiert. Es ist eine navigation zu der Seite, die Ihnen erlauben, um die filter der Art der arbeiten anzuzeigen. Was ich sehe, ist, dass wenn ich auf den Filter, während die animation ist immer noch be-in, das sich die Dinge wirklich chaotisch.
Hier ist die Vorlage der Arbeit Seite derzeit:
http://jjaakk.miller-interactive.com/templates/work.html
Ich habe versucht, viele Dinge, aber mit begrenztem Erfolg. Irgendwelche Gedanken auf, wie man diese Arbeit in einer stabileren Art und Weise?
Ich habe versucht, hinzufügen .stop() auf Klick, aber es hat nicht so geklappt wie ich wollte.
InformationsquelleAutor Jonathan Miller | 2011-04-13
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich denke, das problem wurde im Zusammenhang mit einer Beschränkung mit jQuery delay(). Die folgenden verwendet standard-javascript - setTimeout und clearTimeout wie vorgeschlagen, durch die jQuery delay () - api.
InformationsquelleAutor nhavens
Ich weiß, dass Sie sagte, Sie habe versucht, hinzufügen die .stop() klicken. Der folgende code macht genau das, aber funktioniert gut für mich. Wenn dies ist nicht, was Sie suchen, erklären Sie bitte in die Kommentare.
Arbeiten Demo
Hier ist meine Funktion:
code $('#secondary ul li a').click(function(){ var llid = $(this).attr('id'); var eT= 0; $('.' + llid).each(function(){ $('.everything').hide(); $(this).delay(eT).fadeIn('slow'); eT += 200; }); });
Ich sehe, was du meinst, über die sich überlappende Animationen. Ich denke, das Problem mit einer Beschränkung mit der jquery delay(). Finden Sie in der box oben das Beispiel hier. Ich habe eine zweite Antwort, die verwendet standard-javascript setTimeout und clearTimeout.
InformationsquelleAutor nhavens
Mehrere Verzögerungen, die durch den index
InformationsquelleAutor Hussein