如何使用 jQuery 禁用 div 动画 onclick()？答案

【问题标题】：How do I disable div animations onclick() using jQuery?如何使用 jQuery 禁用 div 动画 onclick()？
【发布时间】：2016-05-04 03:41:34
【问题描述】：

我有一个 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 ？
它就像一个停车场。我按下按钮一辆新车产生并驶向空车位。
您要做的是在按钮上单击新生成的汽车 div 代替旧汽车 div 对吗？
是的，但我不希望旧车移动或消失。

标签： javascript jquery html css animation

【解决方案1】：

它具有动画效果，因为正在创建这个新的 div 并将其推到页面下方。您可以使用绝对定位来将其固定到位。但这可能会使页面看起来有点僵硬。我只是为按钮移动添加平滑效果。

【讨论】：

【解决方案2】：

如你所说：

“但是 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);
    });

【讨论】：

是的，我就是这么想的，但我应该怎么做呢？
无法生成新的 div。 :(
@nika：你现在试过了吗？

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

试试这个..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;
    }

【讨论】：

【解决方案5】：

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

【讨论】：