Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'?

like image 590
Chain Trap Avatar asked Jul 18 '16 07:07

Chain Trap


2 Answers

Change complete callback to:

complete : function() { $(this).remove(); }
like image 172
Sergey Gornostaev Avatar answered Nov 15 '22 11:11

Sergey Gornostaev


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 — e.g. $( "#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>
like image 21
Aung Myo Linn Avatar answered Nov 15 '22 10:11

Aung Myo Linn