我有一个div,它会在页面加载后立即进行动画处理。然后我有一个按钮。在单击此按钮后,我想制作一个新的div并对其进行动画处理,就像以前对其进行动画处理一样,但是在onclick()上,第一个div也会更改其位置。我应该如何做才能以某种方式禁用已经动画的div上的动画效果。

<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);
    });
});

最佳答案

按照以下方式,您只能移动新添加的div。

添加一个临时移动类时,添加动画后将其删除。

$(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

09-30 16:13
查看更多