jQuery-Animationen staffeln

Question

Ich möchte eine Reihe von Elementen in jquery 1.3 zu animieren, mit jedem nächsten Element beginnt auf halbem Weg durch die erste Animation. Mit anderen Worten, ich möchte eine halbe Warteschlange Effekt. Ich habe versucht, den unten stehenden Code zu verwenden, aber es funktioniert nicht. Hat jemand eine Idee?

    $("h3").click(function(){
      $(".projectItem").each(function (i) {
        if (i > 0){
            setTimeout ("", 500);
        }
        $(this).animate({"opacity": 0, "duration": 1000});
      });
    });

PS: Ich habe versucht, verschiedene "Leerlauf" oder "Pause" Jquery-Plugins verwenden, aber ich vermute, die Techniken verwendet wurden vor Jquery 1.3?

PPS: Vielen Dank im Voraus für Ihre Hilfe :)

Answer 1

Sie könnten es so versuchen:

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    // store the item around for use in the 'timeout' function
    var $item = $(this); 
    // execute this function sometime later:
    setTimeout(function() { 
      $item.animate({"opacity": 0}, 1000);
    }, 500*i);
    // each element should animate half a second after the last one.
  });
});

Die allgemeine Idee dabei ist, Ihre Liste von .projectItem - verzögern Sie die Animation vom Beginn bis zu 500ms pro Element. Das erste Element ( i=0 ) hat eine Verzögerung von 0 ms und wird (fast) sofort in der nächsten Ereignisschleife ausgeführt. Jedes andere Element wird um 500ms pro Element vor ihm verzögert werden, und da Ihre Animation dauert 1000ms, wird es etwa auf halbem Weg durch die letzten Elemente Animation beginnen.

Answer 2

Ich denke, es ist einfacher, die Animation in zwei Teile zu zerlegen (von Deckkraft 1 auf 0,5 und von 0,5 auf 0) und eine normale Warteschlange zu verwenden (wenn das möglich ist).

Dieser Code gilt, wenn wir mit Deckkraft 1 beginnen:

$("h3").click(function(){
  $(".projectItem").each(function (i) {
    $(this).animate({"opacity": 0.5, "duration": 500}, function(){
      //... put here something in the half way ...
      $(this).animate({"opacity": 0, "duration": 500}); 
    });
  });
});