G. Ayub G. Ayub - 1 year ago 86
CSS Question

jquery how to make an element comeback to initial position after animation

I'm using jQuery to make some animations in my website but i'm just copying some portions of code and i haven't really got any skills in jQuery.
My problem is that i have a button that makes my animation start on click and the animated block moves but i want him to go back at the end of the animation to his initial place to make impossible to get the animated block so far by clickinG much times on the button.
I hope it's clear, here is my code :


<div id="button">Click here</div>
<div id="square"></div>


#square { width:100px; height:100px; position:relative;}


$( "#button" ).click(function() {
$( "#square" ).animate({
left: "-=60px",
}, 400);

How can i get the quare coming back to his initial position after the animation ?

Answer Source

You would use a complete callback function to readjust the position of the element. See: http://codepen.io/TheStonedTurtle/pen/gLRevN


$( "#square" ).animate({
  left: "-60px",
}, 400, function(){
  $( "#square" ).css('left','0px');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download