我有一个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