我有一个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);
});
});
答案 0 :(得分:1)
正如你所说:
“但onclick()第一个div也改变了它的位置”
原因是您要将animate
分配给class
car
,并且首先div
也有一个类car
,这就是它改变位置的原因。
解决方案将为提供动态且独特的 class
或id
您可以提供的随机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);
});
答案 1 :(得分:1)
以下方式您只能移动新添加的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 强>
答案 2 :(得分:0)
这是动画,因为正在创建这个新的div并将其推向页面的下方。您可以使用绝对定位将其固定到位。但这可能会使页面看起来有点僵硬。我只是为按钮移动添加了平滑效果。
答案 3 :(得分:0)
试试这个
$(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
答案 4 :(得分:0)
试试这个.. 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;
}