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

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/