Animated jQuery Animations

Question

I want to animate a series of elements in jquery 1.3, with each next element starting halfway through the first animation. In other words, I want the effect of half a line. I tried using the code below, but it does not work. Does anyone have any idea?

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

PS: I tried to use various "unoccupied" or "pause" jquery plugins, but I suspect that the methods used were pre jquery 1.3?

PPS: Thanks in advance for your help :)

Answer 1

You can try something like this:

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

The general idea here is to use your .projectItem list - you delay the animation from the start to 500 ms per element. The first element ( i=0 ) will have a delay of 0 ms and execute (almost) immediately during the next event cycle. Each other element will be delayed by 500 ms per element before it, and since your animation lasts 1000 ms, it will start about halfway through the animation of the last elements.

Answer 2

I think it’s easier to split the animation into 2 parts (from opacity 1 to 0.5 and from 0.5 to 0) and use the usual queue (if a break is possible).

This code is if we start with opacity 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}); }); }); });