javascript - How do I disable div animations onclick() using jQuery? -

i have div animates page loads. have button. after 1 clicks on button want make new div , animate animated previous, onclick() first div changes it's position. how should somehow disable animate effect on div animated.

<div class="wrapper">     <div class="car"></div> </div> <button id="button">spawn new car</button> 

$(document).ready(function() {     var car = $('.car');     car.animate({left:"+=367px"}, 2000);     car.animate({top:"-=247px"}, 2000);       $("#button").click(function () {         $(".wrapper").append('<div class="car"></div>');         var car = $('.car');         car.animate({left:"+=367px"}, 2000);         car.animate({top:"-=247px"}, 2000);     }); }); 

following way can move newly added div.

add 1 temporary move class when add , remove after animation.

$(document).ready(function() {      var car = $('.car');      car.animate({left:"+=367px"}, 2000);      car.animate({top:"-=247px"}, 2000);          $("#button").click(function () {          $(".wrapper").append('<div class="car move">car</div>');          var car = $('.move');          car.animate({left:"+=367px"}, 2000);          car.animate({top:"-=247px"}, 2000);          $(".car").removeclass('move');      });  });

.car{    position:absolute;    left:0;    top:0;  }    .wrapper{    position:relative;    top:0;    left:0;    width:100%;      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="wrapper">      <div class="car">car</div>  </div>  <button id="button">spawn new car</button>

working fiddle