代码之家 › 专栏 › 技术社区 › Matt Anxo P

jquery“:animated”选择器是否匹配使用fadein()和fadeout()的项?

animated fadeout fadein click jquery

Matt Anxo P · 技术社区 · 15 年前

我正在尝试阻止动画发生时单击列表项。所以在我的点击处理程序的顶部,我想做如下的事情:

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

注意“砰”(!)在上面的if语句中。我还没有测试过,但我想这是可行的。我不确定的是,当对通过fadein()和fadeout()设置动画的元素运行时,“.is(:animated)”是否返回true。我知道jquery有一个.animate()函数,我假设:animated当然可以与使用该函数动画的元素相对应,但它是否可以与使用fadein()和fadeout()的元素一起使用?谢谢。

更新: 在一些戏剧性的错误发布之后,一切似乎都很好,感谢所有伟大的后续工作和编辑的回复。最后,我发现:animated与使用fadein()和fadeout()动画的元素匹配,因为jquery源使用.animate()来实现这些效果。我的最后一张支票原封不动:

如果(!)$(this).is(:animated))。{
//在此处处理单击代码
}

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

3 回复 | 直到 14 年前

Doug Neiner 15 年前

对, :animated 对于jquery创建的任何类型的动画都将返回true。如果使用jquery的话,它还可以为任何动画插件做这个工作。 animate 功能。

但是,您可以用jquery编写不同的代码:

编辑这个 not 函数与 is . 它过滤掉节点,但仍然返回jquery对象,该对象的计算结果为 true . 使用 不 正如我最初建议的那样,您必须添加 .length 测试:

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

否则,使用函数作为最初发布的操作:

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

SLaks 15 年前

:animate 将匹配 fadeOut 打电话。

如果您查看jquery源代码,您将看到 淡出 简单呼叫 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 );
    };
});

Erik 14 年前

你根本不需要把if语句放在里面。您可以在“单击代码”之前链接.not(“:animated”)。

例如,这些淡入淡出仅在DIV不在动画制作过程中才起作用,因此消除了令人讨厌的队列问题。

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

对于.click()也可以使用相同的方法。