Animacje jQuery Stagger

Question

Chcę animować serię elementów w jquery 1.3, z każdym kolejnym elementem zaczynającym się w połowie pierwszej animacji. Innymi słowy, chcę efektu pół kolejki. Próbowałem użyć poniższego kodu, ale to nie działa. Czy ktoś ma jakieś pomysły?

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

PS: próbowałem korzystać z różnych „idle” lub „Pauza” wtyczek jQuery, ale podejrzewam, że techniki stosowane były wstępnie jQuery 1.3?

PPS: Dzięki z góry za pomoc :)

Answer 1

można spróbować coś takiego:

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

Ogólna idea jest tu za pomocą listy .projectItem - opóźnić animację od początku do 500ms za sztukę. Pierwsza pozycja (i=0) będzie mieć opóźnienie 0ms i wykonać (prawie) natychmiast podczas następnej pętli zdarzeń. Każdy kolejny element zostanie opóźniony o 500ms na element przed nim, a ponieważ twoja animacja trwa 1000ms, rozpocznie się mniej więcej w połowie ostatniej animacji elementów.

Answer 2

myślę, że to prostsze złamać animacji do 2 części (z kryciem 1 do 0,5 i od 0,5 do 0) i użyć regularną kolejkę (jeżeli łamanie jest możliwe).

Ten kod jest jeśli zaczniemy w kryciu 1:

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