如何使用jQuery禁用onclick（）的div动画？

Question

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

Answer 1

如你所说 ：

“但是onclick（）第一个div也改变了它的位置”

原因是你正在为class car分配animate ，而第一个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);
    });

Answer 2

按照以下方式，您只能移动新添加的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> 

工作小提琴

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

这将从当前div删除car类并添加新的div与car类

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