jQuery“：animated”选择器是否与使用fadeIn（）和fadeOut（）的项匹配？

Question

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

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

请注意上面if语句中的'bang'（！）。我没有测试过，但我认为这样可行。我不确定的是'。（（动画）'是否会在通过fadeIn（）和fadeOut（）进行动画处理时返回true。我知道jQuery有一个.animate（）函数，我假设：动画肯定会对使用该函数动画的元素起作用，但是它会与那些使用fadeIn（）和fadeOut（）一起使用吗？感谢。

更新：经过一些戏剧性的错误发布后，一切看起来都很顺利，并且感谢所有精彩的后续和编辑的回复。最后，我发现，是的，：动画匹配那些使用fadeIn（）和fadeOut（）动画的元素，因为jQuery源使用.animate（）来实现这些效果。我最后的检查是最初发布的：

<*>

..而不是像某些情况下提出的那样使用.not（）（虽然我相信这些会像当前发布的那样工作）。再次感谢。

Answer 1

是的，：animated 将为jQuery创建的任何类型的动画返回true。它也可以用于任何动画插件，只要它们使用jQuery animate 函数。

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

编辑 not 功能与 的功能不同。它过滤掉节点，但仍返回一个jQuery对象，该对象的计算结果为 true 。要像我最初建议的那样使用 not 函数，你必须在测试中添加 .length ：

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

否则，请使用最初发布的OP函数：

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

Answer 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 );
    };
});

Answer 3

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

作为一个例子，这些淡化只有在div不在动画的过程中才有效，因此摆脱了令人讨厌的队列问题。

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

对于.click（）也是如此。