Animaciones de espacios de nombres

Question

¿Es posible crear animaciones de espacios de nombres? Específicamente, mi problema es que en un elemento dado $myElement estoy haciendo animaciones de dos tipos. Ahora me gustaría usar .stop() en solo uno de estos tipos, no en ambos.

¿Cómo puedo hacer eso?

EDITAR

Código disponible aquí: http://jsfiddle.net/y34ME/1/

Mi problema es que cuando hago clic en el span quiero que se desvanezca, independientemente de si hago un mouseout. Actualmente, el mouseout interrumpe el desvanecimiento debido al .stop(), pero necesito el .stop() para evitar que los eventos mouseover y mouseout hagan cola.

Answer 1

Creo que lo que realmente quiere es no desencadenar el mouse en absoluto si ya se está desvaneciendo el elemento de distancia. Método de Andrew funciona bien, pero si usted quiere mantener sus controladores de eventos intacta (por ejemplo, si hay una manera de mostrar este elemento nuevo), utilizar una clase de estado:

$('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

¿Hay alguna razón por la que necesite usar delegado? Este código parece hacer lo que usted quiere:

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

Answer 3

Solo use undelegate. Para un código más limpio, todo se puede encapsular en una llamada de delegado también.

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

       });