jQuery selector :not(:animated)

Question

We're trying to make sure our JavaScript menu, which loads content, doesn't get overrun with commands before the content in question loads and is unfurled via .show('blind', 500), because then the animations run many times over, and it doesn't look so great. So I've got about six selectors that look like this:

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

And it doesn't seem to be having any effect. Trying only :animated has the expected effect (it never works, because it doesn't start animated), and trying :not(div) also has this effect (because #center_content is a div). For some reason, :not(:animated) seems not to be changing the results, because even when I trigger the selector while the div in question is visibly animated, the code runs. I know I've had success with this sort of thing before, but the difference here eludes me.

---

$("#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);
    }
});

I hope this provides sufficient context. I feel like the second selector is overkill (since it would only be run if the first selector succeeded), but I don't see how that would cause it to behave in this way.

---

Here's the snippet that seemed to be working in the other context:

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

Here, the animations queue instead of interrupt each other, but it occurs to me that the selector still doesn't seem to be working - the animations and associated loading events shouldn't be running at all, because the selectors should fail. While the queueing is nice behavior for animations to display, it made me realize that I seem to have never gotten this selector to work. Am I missing something?

Answer 1

Sometimes it's helpful to use .stop() and stop the current animation before you start the new animation.

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

Really depends on how it behaves within your environment. Remember that .stop() will stop the animation as it was (eg. halfway through hiding or fading)