How to disable onclick () div animation using jQuery?

Question

I have a div that animates as soon as the page loads. Then I have a button. After one click on this button, I want to create a new div and animate it, since it is animated by the previous one, but onclick () the first div also changes its position. How can I do this to somehow disable the animation effect on a div that is already 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);
    });
});

Answer 1

After that, you can only move the newly added div.

Add one temporary move class when you add and remove it after the 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>

Run codeHide result

Working script

Answer 2

:

", onclick() div

, animate class car, div car, .

class id

, :

$("#button").click(function () {
        var id=Math.floor(Math.random() * 100) + 1;
        $(".wrapper").append('<div class="car_"'+id+'></div>');
        var car = $(".car_"+id+"");
        car.animate({left:"+=367px"}, 2000);
        car.animate({top:"-=247px"}, 2000);
    });

Answer 3

, div . , . . .

Answer 4

$(document).ready(function() {
var car = $('.car');
car.animate({left:"+=367px"}, 2000);
car.animate({top:"-=247px"}, 2000);


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

car div div car class

Answer 5

. JSFIDDLE

 $(document).ready(function() {
        var car = $('.car');
        car.animate({left:367, top:0}, 2000);


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

    .car{
        border:1px #000 solid;
        height:150px;
        width:150px;
        position:relative;
    }