1

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.

2 Answers 2

0

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.

1
  • ahh I get it now; Thanks for that one. So it was never that I need to actually do the first part it was to a queue up so the delay would happen. Thanks you again.
    – Tad
    Jul 11, 2010 at 1:48
0

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});

});
2
  • That totally worked Thank you so much! I still have to grasp what you were saying. Why does the element have to busy though? Is it just for timer to be put in?
    – Tad
    Jul 11, 2010 at 1:21
  • Yeah, that’s same as using setTimeout, only that using animate keeps everything in a queue.
    – Evadne Wu
    Jul 11, 2010 at 15:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.