Question

每次点击链接时，我都会向右移动200px。

问题是，如果我在框移动时单击链接，它将添加额外的200px。我不希望在效果结束之前发生这种情况。

所以我想点击链接并将框移动200px，如果我在此期间再次点击它（当它移动时）我不希望它再次添加200px。

可以这样做吗？

我的代码：

#box {
    width: 50px;
    height: 50px;
    background: red;
    position: relative;
}

<a href="#" id="link">CLICK</a>
<div id="box"></div>

$('#link').click(function() {
    $('#box').animate({
        'left': '+=100'
    });
});

Answer 1

在运行动画之前，请使用animated选择器检查它是否已设置动画：

$('#link').click(function() {
    if(!$("#box").is(":animated")){
       $('#box').animate({
            'left': '+=100'
        });
    }
});

JS小提琴： http://jsfiddle.net/8C9Xc/

Answer 2

只是为了补充上面的Kevins答案。 animate还有一个complete函数docs here。

这将允许您执行问题标题所说的内容（等到上一个效果完成）

e.g。

$('#link').click(function() {
    if(!$("#box").is(":animated")){
       $('#box').animate({
            'left': '+=100',
            complete: function() {/*this will run once the animation is complete*/}
        });
    }
});

使动画效果等到上一个效果完成

2 个答案: