Stagger jQuery Animationen

Question

Ich möchte eine Reihe von Elementen in jQuery 1.3 animieren, wobei jedes nächste Element in der Mitte der ersten Animation beginnt. Mit anderen Worten, ich möchte einen Halbqueue-Effekt. Ich habe versucht, den folgenden Code zu verwenden, aber es funktioniert nicht. Hat jemand irgendwelche Ideen?

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

PS: Ich habe versucht, verschiedene zu verwenden "Leerlauf" oder "Pause" Jquery Plugins, aber ich vermute, dass die verwendeten Techniken vor jquery 1.3 waren?

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

Answer 1

Sie könnten versuchen, so etwas wie dieses:

$("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 ist hier mit Ihrer Liste der .projectItem - verzögern Sie die Animation von Anfang bis 500ms pro Artikel. Der erste Eintrag (i=0) hat eine Verzögerung von 0 ms und wird (fast) sofort während der nächsten Ereignisschleife ausgeführt. Jedes andere Element wird um 500ms pro Element davor verzögert, und da Ihre Animation 1000ms dauert, wird ungefähr die Hälfte der letzten Elementanimation gestartet.

Answer 2

Ich denke, es ist einfacher, ist die Animation zu 2 Teilen zu brechen (von Opazität 1 bis 0,5 und 0,5-0) und regelmäßige Warteschlange verwenden (wenn der Bruch ist möglich).

Dieser Code ist, wenn wir bei Opazität 1 starten:

$("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}); 
    }); 
    }); 
});