G. Ayub G. Ayub - 9 days ago 5
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 :

HTML

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


CSS

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


JavaScript

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


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

Answer

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

http://api.jquery.com/animate/

$( "#square" ).animate({
  left: "-60px",
}, 400, function(){
  $( "#square" ).css('left','0px');
});
Comments