jQuery selector :not(:animated)

jQuery selector :not(:animated)

本文关键字：animated not selector jQuery      更新时间：2023-09-26

我们正在努力确保我们的JavaScript菜单，加载内容，不会在问题内容加载之前被命令超载，并通过。show('blind'， 500)展开，因为动画运行了很多次，它看起来不那么好。我有六个选择器，像这样

("#center_content:not(:animated)")

它似乎没有任何效果。Trying:animated具有预期的效果(它永远不会工作，因为它不会启动动画)，并且Trying:not(div)也具有这种效果(因为#center_content是一个div)。出于某种原因，:not(:animated)似乎没有改变结果，因为即使当我触发选择器时，所讨论的div是可见的动画，代码也会运行。我知道我以前在这类事情上取得过成功，但我不知道这次有什么不同。

$("#center_content:not(:animated)").hide("blind", 500, function () {
    var selector_str = 'button[value="' + url + '"]';
    //alert(selector_str);
    var button = $(selector_str);
    //inspectProperties(button);
    $("#center_content:not(:animated)").load(url, CenterContentCallback);
    if (button) {
        $("#navigation .active").removeClass("active");
        button.addClass("active");
        LoadSubNav(button);
    }
});

我希望这提供了足够的上下文。我觉得第二个选择器是多余的(因为它只会在第一个选择器成功时运行)，但我不明白这将如何导致它以这种方式运行。

下面的代码片段似乎在另一个上下文中工作:

function clearMenus(callback) {
        $('[id$="_wrapper"]:visible:not(:animated)').hide("blind", 500, function() {
           $('[id^="edit_"]:visible:not(:animated)').hide("slide", 200, function() {
            callback();
            });
        });
}

在这里，动画队列而不是彼此中断，但它发生在我看来，选择器似乎仍然没有工作-动画和相关的加载事件不应该运行在所有，因为选择器应该失败。虽然排队是动画显示的好行为，但它使我意识到我似乎从未让这个选择器工作。我错过什么了吗?

有时使用.stop()并在开始新动画之前停止当前动画会很有帮助。

$("#center_content").stop().hide("blind", 500, function () {});

实际上取决于它在您的环境中的行为。请记住，.stop()将停止动画，因为它是(例如。隐藏或褪色)

我不知道我是否理解正确，但如果你想确保用户不会在当前动画时再次触发菜单动画(导致它排队动画和看起来迟钝)，这是有效的，应该有所帮助。我用的是if-statement。在任何鼠标悬停/关闭动画之前，我添加了.stop(false, true)。

    $('whatever').click(function(){
       //if center_content is not currently animated, do this:
       if ($("#center_content").not(":animated")) {
         $(this).hide(etc. etc. etc.)
       }
       //else if center_content IS currently animated, do nothing.
       else {
         return false;}
    });

另一个我在别处找到的例子:

if($("#someElement").is(":animated")) {
    ...
}
if($("#someElement:animated").length) {
    ...
}
// etc

那么你可以这样做:

$("#showBtn").attr("disabled", $("#someElement").is(":animated"));
相关文章：