Décaler les animations jQuery

Question

Je souhaite animer une série d'éléments dans jquery 1.3, chaque élément suivant commençant à la moitié de la première animation. En d'autres termes, je veux un effet de demi-file. J'ai essayé d'utiliser le code ci-dessous, mais cela ne fonctionne pas. Quelqu'un a-t-il une idée?

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

PS: Je tenté d'utiliser divers "pause" "ralenti" ou plugins jquery, mais je soupçonne que les techniques utilisées ont été pré jquery 1.3?

PPS: Merci d'avance pour votre aide :)

Answer 1

Vous pouvez essayer quelque chose comme ceci:

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

L'idée générale est ici en utilisant votre liste de .projectItem - vous retardez l'animation du début jusqu'à 500ms par article. Le premier item (i=0) aura un délai de 0ms et s'exécutera (presque) immédiatement lors de la prochaine boucle d'événement. Chaque autre élément sera retardé de 500ms par élément avant, et puisque votre animation dure 1000ms, il commencera à peu près à mi-parcours de l'animation des derniers éléments.

Answer 2

je pense qu'il est plus simple de briser l'animation 2 parties (de l'opacité 1 à 0,5, et de 0,5 à 0) et utiliser la file d'attente régulière (si la rupture est possible).

Ce code est si nous commençons à l'opacité 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}); 
    }); 
    }); 
});