Chain Trap Chain Trap - 1 year ago 74
jQuery Question

Reset jQuery animation when it stops animating

I got an amazing ripple effect implementation from this website that uses the SVG/Circle element and a jQuery animation function to create the ripple effect on user-click. Although I have a knowledge of basic programming, I know less about JavaScript and jQuery methods/functions so I did read a lot from my research about JS and jQuery.

I found the ripple effect implementation; useful, light-weight and easy so I want to explore and expand the code to fit onto my projects.

Okay, so the first thing I need to know here is, how can I reset the changes made by the animation when it stops animating? I know this is a simple question for you but as a beginner at JS and jQuery, how can I achive that?

Here's the demo code to see what is actually happening here.

I tried adding the function (as seen on the code):

complete : function(){c.removeAttr('style');}

But nothing has changed and it still remains after the animation ends.

Any idea what I'm missin'?

Answer Source

Change complete callback to:

complete : function() { $(this).remove(); }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download