Question

假设我在页面上有2个动画按钮。用户单击第一个动画并将其设置为动画。我有它所以动画打开并保持不变直到用户点击页面上的其他位置。但是当用户点击另一个动画触发按钮而另一个动画仍处于启动状态时，一切都搞砸了，两个动画同时发生:(。那么，如果完成动画的结束动画，我将如何延迟其他动画？ Jsfiddle：http://jsfiddle.net/hBb9L/17/

$("#e").click(function (e) {
    //done
    $("#re").animate({
        "margin-top": "104px"
    }, 800);
    $("#ret").animate({
        "margin-top": "104px"
    }, 800);
    $(".popu").animate({
        "margin-top": "-102px"
    }, 800);
    $("#s").show(200);
    e.stopPropagation();

Answer 1

Jquery有一个你可以使用的animated课程。

对于您的情况，您可以在if语句中的每个触发器/按钮内包装动画集合，检查“is：animated：”

if($("#re").is(':not(:animated)') && $("#ret").is(':not(:animated)')) {
   .....
   .....
}

is:animated和:not(:animated)还有其他一些堆栈溢出答案。

这种方法有点麻烦，另一种解决方案是创建一个布尔变量来代替is：animated check，然后在动画运行时设置它：

 $(document).ready(function () {
     var inProgress = false;
     $("#s").hide(0);

 $("#e").click(function (e) {
    if(!inProgress) {
        inProgress = true;
        .....
    $("#s").show(200, function() {
           // inProgress = false;
        });
    }
  });
  ....

});

为了完整性，我添加了两个方法，为您添加了Updated Fiddle。在将鼠标悬停在每个磁贴上时，我也为您更改了光标。

我建议检查jquery stop()，它会停止当前为该元素运行的所有动画，以及queue()，您也可以使用它来调整解决方案。

jQuery 2动画一个接一个

1 个答案: