Reset jQuery animation when it stops animating
Question
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'?
3 answers
solution1
2 ACCPTED 2016-07-18 07:46:13
将完整回调更改为：
complete : function() { $(this).remove(); }
solution2
1 2016-07-18 07:51:35
In order to remove "r" from the style attribute of the circle, try
complete : function(){c.css( "r", "" );}
Ref: http://api.jquery.com/css/ Setting the value of a style property to an empty string — eg $( "#mydiv" ).css( "color", "" ) — removes that property from an element.
or
complete : function(){c.css( "r", "0" );}
Try running the snippet below:
(function(){ $(".button").on("click", function(e){ var yOffset = e.pageY - $(this).offset().top; var xOffset = e.pageX - $(this).offset().left; var self = this; var xPos = parseInt(xOffset); var yPos = parseInt(yOffset); $(this).find("svg").remove(); // Remove existing animation changes $(this).append('<svg><circle cx="'+xPos+'" cy="'+yPos+'" r="'+0+'"></circle></svg>'); /* Make the animation of SVG - Circle */ var c = $(self).find("circle"); c.animate( { "r" : $(self).outerWidth() }, { easing: "easeOutQuad", duration: 500, step : function(val){}, /*------------------------- THIS FUNCTION SHOULD WORK --------------------------*/ complete : function(){c.css( "r", "0" );} } ); }); }());
.button { position: relative; display: inline-block; height: 40px; padding: 0 20px; margin: 0; background: transparent; border: none; color: rgb(0,0,0,0); font-size: 20px; font-weight: 900; text-align: center; text-transform: uppercase; -webkit-tap-highlight-color: transparent; } .button:hover { background-color: rgba(158,158,158,0.10); } .button:active, .button:focus { background-color: rgba(158,158,158, 0.30); outline: 0; } /* SVG - Circle for the ripple effect */ .button svg { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .button circle { fill: rgba(0,0,0,0.50); }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Reset jQuery animation when it stops animating</title> </head> <body> <button class="button">Button</button> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> </body> </html>
solution3
0 2016-07-18 07:46:12
You should use stop method for animation stop - https://api.jquery.com/stop/
you can also use clearQueue method
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.