0

我试图防止在动画发生时单击列表项。所以在我的点击处理程序的顶部，我想做这样的事情：

if(!$(this).is(:animated)) {
    // handle click code here
}

注意上面 if 语句中的 'bang' (!)。我没有测试过，但我认为这会奏效。我不确定的是“.is(:animated)”在对通过fadeIn() 和fadeOut() 进行动画处理的元素运行时是否会返回true。我知道 jQuery 有一个 .animate() 函数，并且我认为 :animated 肯定适用于使用该函数动画的元素，但它是否适用于使用 fadeIn() 和 fadeOut() 的元素？谢谢。

更新：在一些戏剧性的错误帖子之后，一切似乎都很好，感谢所有伟大的后续和编辑的回复。最后，我发现，是的， :animated 匹配那些使用fadeIn() 和fadeOut() 动画的元素，因为jQuery 源使用 .animate() 来实现这些效果。我的最终检查与最初发布的一样：

if(!$(this).is(:animated)) {
    // handle click code here
}

..而不是像在某些情况下建议的那样使用 .not() （尽管我相信这些会像当前发布的那样工作）。再次感谢。

4

3 回答 3

2

:animate将匹配已fadeOut调用的元素。

如果您查看 jQuery 源代码，您会发现它fadeOut只是调用animate.
它是这样定义的：

// Generate shortcuts for custom animations
jQuery.each({
    slideDown: genFx("show", 1),
    slideUp: genFx("hide", 1),
    slideToggle: genFx("toggle", 1),
    fadeIn: { opacity: "show" },
    fadeOut: { opacity: "hide" }
}, function( name, props ){
    jQuery.fn[ name ] = function( speed, callback ){
        return this.animate( props, speed, callback );
    };
});
于 2009-11-29T20:20:24.150 回答
2

是的，:animated对于 jQuery 创建的任何类型的动画都会返回 true。它也适用于任何使用 jQueryanimate函数的动画插件。

然而，你可以用不同的方式编写代码来使用 jQuery：

编辑not功能不是相反的is。它过滤掉节点，但仍然返回一个 jQuery 对象，其计算结果为true. 要使用not我最初建议的功能，您必须添加.length到测试中：

if( $(this).not(':animated').length ) {
    // Handle click code here
}

否则，将函数用作最初发布的 OP：

if( !$(this).is(':animated')) {
    // Handle click code here
}
于 2009-11-29T20:24:44.077 回答
0

您根本不需要 if 语句。您可以在“点击代码”之前链接 .not(':animated') 。

例如，这些淡入淡出仅在 div 未处于动画过程中时才有效，因此摆脱了令人讨厌的队列问题。

$('a#show_me').toggle(function() {
    $('div#the_money').not(':animated').fadeIn();
}, function() {
    $('div#the_money').not(':animated').fadeOut();
});

它也适用于 .click() 。

于 2010-09-27T01:43:56.183 回答