Namespacing animations

Question

Is it possible to namespace animations? Specifically, my problem is that on a given element $myElement I am doing animations of two types. Now I would like to use .stop() on only one of these types, not both.

How can I do that?

EDIT

Code available here: http://jsfiddle.net/y34ME/1/

My problem is that when I click the span I want it to fade away, regardless of whether I do a mouseout. Currently, the mouseout interrupts the fading away because of the .stop(), but I need the .stop() to prevent mouseover and mouseout events to queue up.

Answer 1

I think what you really want is to not trigger the mouseout at all if you're already fading the element away. Andrew's method works well, but if you want to keep your event handlers intact (for example, if there's a way to show this element again), use a state class:

$('p').delegate('span:not(.hidden)', {
    'mouseover': function () {
       $(this).stop(true, true).animate({backgroundColor: 'blue'}, 1000);
    },
    'mouseout':function () {
       $(this).stop(true, true).animate({backgroundColor: 'white'}, 1000);
    },
    'click': function () {
       $(this).addClass('hidden').stop(true, true).animate({backgroundColor: 'green'}, 1000).fadeTo(2000, 0);
    }
});

http://jsfiddle.net/y34ME/4/

Answer 2

Is there a reason you need to use delegate? This code seems to do what you want:

$("span").hover(
    function() {
        $(this).animate({backgroundColor: "blue"}, 1000);
    },
    function() {
        $(this).animate({backgroundColor: "white"}, 1000);
    }
);

$("span").click(function() {
    $(this).animate({backgroundColor: "green"}, 1000).fadeTo(2000, 0);
});