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 promise（）。

http://api.jquery.com/promise/

Answer 2

在animate()的属性中，请务必设置queue: true。这会将下一次单击的动画添加到动画队列的末尾，这意味着它将在当前动画完成后执行，而不是立即执行。

例如，如果我有两个按钮左右移动一个测试div：

<button type="button" id="moveLeft">Left</button>
<button type="button" id="moveRight">Right</button>

<div id="test"></div>

稍微调整一下方框：

#test {
    width: 50px;
    height: 50px;
    left: 0;
    top: 50px;
    background: #f00;
    position: fixed;
}

然后让这个JavaScript连接事件：

var $box = $('#test');

$('#moveRight').click(function() {
    $box.animate({
        queue: true,
        left: "+=50"
    });
});

$('#moveLeft').click(function() {
    $box.animate({
        queue: true,
        left: "-=50"
    });
});

您将看到，如果您依次单击按钮，则动画会排队并仅在当前动画完成后运行。

<强> jsFiddle Demo

一个接一个的jQuery动画

2 个答案: