Question

我希望能够正确解释自己我们有类似的东西（一个简单的例子）：

$('#click').click(function() {
    $('#a').animate({width: 'toggle'}, 1500);
    $('#b').animate({width: 'toggle'}, 1500);
    $('#b').animate({width: 'toggle'}, 1500);
});

现在，如果我在“#click”上多次点击，即使在效果完成之前，我的重复点击也会被添加到一起并且多次执行该功能（这是一个非常不愉快的事情，特别是当使用“悬停”时，就像你一样知道）。

但我希望只有在效果完成后才能检测到点击次数。我该怎么办？

我阅读了有关queue的文档，但我不确定在这种情况下是否有效我可以举一些例子吗？

谢谢。

Answer 1

尝试：

var isAnimating = $("#a").is(':animated');

当元素为动画时，上面的代码将返回true。

Answer 2

您使用queue走在正确的轨道上，只需检查队列的长度，例如：

var a = $("#a");
if (a.queue().length === 0) {
    a.animate(...);
}

Live Example | Live Source

如果您愿意，可以为此创建一个小插件：

(function($) {
    $.fn.maybeAnimate = maybeAnimate;
    function maybeAnimate() {
        var args = arguments;
        this.each(function() {
            var $this = $(this);
            if ($this.queue().length === 0) {
                $this.animate.apply($this, args);
            }
        });
        return this;
    }
})(jQuery);

...然后像这样使用它：

$("#a").maybeAnimate({width: 'toggle'}, 1500);
$("#b").maybeAnimate({width: 'toggle'}, 1500);
$("#b").maybeAnimate({width: 'toggle'}, 1500); // Really #b again???

Live Example | Live Source

重新评论以下内容：

但是当点击的功能更复杂并且不仅包括“动画”，而且包括不同的功能以及if / else时该怎么办？我希望点击的所有功能都是一个队列。有可能吗？

为了将动画结果与其他异步事物相结合，您可能希望使用Deferred和Promise个对象。您可以使用.promise从jQuery集中获取动画的Promise; e.g：

 var p = $("#a").animate(/*...*/).promise();

然后，您可以通过$.when和Promise#then将该承诺与其他承诺/延期相结合。

Answer 3

我更喜欢使用stop()功能。查看文档，这是重置动画的最佳解决方案。我个人认为应该处理每个用户输入，而不是忽略。所以我会停止动画并启动新动画。

jQuery：不要添加更多点击

3 个答案: