Question

我有很多动画，我使用jQuery来制作动画。每个事件可能由链接在一起的许多动画组成。我只希望一次运行，但如果发生新事件，我想离开当前事件并转到新事件。例如：

HTML：

<div class="container">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
<button class="btn">Click me</button>

CSS：

.container {
    height: 100px;
    width: 200px;
    background: yellow;   
    position: relative;
}
.div1 {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 90px;
    height: 80px;
    background: red;
    opacity: 0
}
.div2 {
    position: absolute;
    left: 90px;
    top: 10px;
    width: 90px;
    height: 80px;
    background: green;
    opacity: 0
}

jQuery的：

var count = 1, element;
$('.btn').click(function() {
    if (element) {
        element.stop();
    }
    element = $('.div' + count);
    count = count === 1 ? 2 : 1;
    element.animate({opacity:1}, 1000, function(){
        element.animate({left: '50px'}, 2000, function() {
            element.animate({opacity: 0}, 1000, function(){
                element.removeAttr('style');
            });
        });
    });
});

jQuery文档提到了这个应该取消动画的stop（）方法，但它在这个例子中不起作用。 JSFiddle Example

Answer 1

我能够通过添加：

来解决这个问题

            element.removeAttr('style');
            element = undefined;

到if语句检查元素。我想stop（）会停止当前正在运行的动画，但不会停止链中的下一个动画。感谢您的输入

C

Answer 2

尝试：

element.stop(false, true);

如何取消正在运行的动画

2 个答案: