Jquery Animation help

Question

I am trying to create a ripple effect with Jquery. By having an element "bounce" one right after the other. I have it working but not sure as to why it only works this way. First off here is the code.

//First Part (I Don't know why I need it?)
$(elements).queue(function(){
   $(this).fadeTo("fast",1);
   $(this).dequeue();});

//The Actuall Ripple Effect             
for (var i = 0; i < elements.length; i++)                       
    $(elements[i]).effect("bounce",{times:1}).delay(i * 50);
                }

If I were to remove the first part all the elements would bounce at the same time. So My question is why does this happen and is their a way around it?

I am using Jquery 1.4.2 and the "elements" are images inside an inline un-ordered list

//edit I forgot to state that the bounce effect comes from Jquery UI.

Answer 1

Try:

jQueryElement.animate({bogusAttribute: false}, 400).animateMethod();

Where 400 is the duration of the delay in milliseconds. the bogusAttribute can be anything that is not in the CSS specs, and the attribute value can also be anything, rationale being just getting the element busy without really animating.

element.delay() suspends queued effects — it “[sets] a timer to delay execution of subsequent items in the queue”, so element.firstAnimationMethod(/* arguments */).delay(400).secondAnimationMethod(/* arguments */) works.

That’ll be:

$(elements).each(function(index, elementToAnimate) {

    $(this).animate({bogus: false}, (index * 50)).effect("bounce", {times: 1});

});

Answer 2

You just have .delay() on the wrong side of the effect.

Try it out: http://jsfiddle.net/MF3A8/ (click the Run button at the top to replay it)

elements = $('div');

for (var i = 0; i < elements.length; i++) {                   
    elements.eq(i).delay(50 * i).effect("bounce",{times:1});
}​

And you can use .eq() to reference the proper element in the jQuery object.

• http://api.jquery.com/eq/