2

我希望能正确地解释自己。
我们有这样的事情（一个简单的例子）：

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

现在，如果我在“#click”上单击几次，甚至在效果完成之前，我的重复单击就会被添加到一起，并且该功能会多次执行（这是一件非常不愉快的事情，尤其是在使用“悬停”时，如你所知）。

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

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

谢谢你。

4

3 回答 3

4

尝试：

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

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

于 2013-09-08T10:36:33.410 回答
3

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

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

实例| 直播源

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

(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???

实例| 直播源

在下面回复您的评论：

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

要将动画的结果与其他异步事物结合起来，您可能需要使用Deferred和Promise对象。您可以使用;Promise从 jQuery 集中获取动画 .promise例如：

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

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

于 2013-09-08T10:34:27.840 回答
0

我更喜欢使用stop()函数。查看文档，这是重置动画的最佳解决方案。我个人认为每个用户的输入都应该被处理并且永远不会被忽视。所以我会停止动画并开始新的动画。

于 2013-09-08T10:41:41.147 回答