animate multiple elements at different speeds
I'm having a weird one...
I want to slide in several thumbnail images but at differing speeds, so they finish sliding in at differing times. Sounds simple enough, but this code:
-
for (var i=0; i<n; i++)
{
$("#thumb"+i).animate( {top: 16+(i*100)+"px"}, {queue: false, duration: i*1500 });
}
...produces some very strange results. The first thumb waits for 1500 milliseconds then slides in very quickly. Then the next thumb waits 1500 milliseconds and slides in quickly, and so on for all of them.
I've uploaded the mess here:
http://www.sayagain.co.uk/folio/
so you can see for yourselves.
Anyone have any idea how to make this animation smooth and timely?
So far I've tried playing around with queues, dequeue(), and the step function without any luck.