Agrupar jQuery Animaciones

Question

Quiero animar una serie de elementos en jquery 1.3, con cada elemento siguiente comenzando a la mitad de la primera animación. En otras palabras, quiero un efecto de media cola. Intenté usar el siguiente código, pero no está funcionando. ¿Alguien tiene alguna idea?

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

PD: he tratado de utilizar varios "inactivo" o "pausa" plugins jQuery, pero sospecho que las técnicas utilizadas fueron pre jQuery 1.3?

PPS: Gracias de antemano por su ayuda :)

Answer 1

usted podría intentar algo como esto:

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

La idea general aquí es utilizar su lista de .projectItem - se demora la animación desde el comienzo hasta 500ms por artículo. El primer elemento (i=0) tendrá un retraso de 0ms y se ejecutará (casi) inmediatamente durante el próximo ciclo de eventos. Cada otro elemento se retrasará en 500ms por artículo antes, y como su animación dura 1000ms, comenzará aproximadamente a la mitad de la animación de los últimos elementos.

Answer 2

creo que es más fácil de romper la animación a 2 partes (de la opacidad 1 a 0,5, y de 0,5 a 0) y el uso de cola regular (si la ruptura es posible).

Este código es si empezamos en la opacidad 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}); 
    }); 
    }); 
});