jQuery vuelo estacionario() no funciona con elementos con posición absoluta y la animación

Question

tengo algo de HTML que tiene este aspecto:

<a href="#" class="move"><span class="text">add</span><span class="icon-arrow"></span></a> 

Y tengo un evento jQuery registrado en la etiqueta de anclaje:

$('a.move').hover(
    function (event) { 
     $(this).children('span.text').toggle(); 
     $(this).animate({right: '5px'}, 'fast'); 
    }, 
    function (event) { 
     $(this).children('span.text').toggle(); 
     $(this).animate({right: '0px'}, 'fast'); 
    } 
); 

Cuando paso el mouse sobre la etiqueta de anclaje, muestra span.text y mueve el ancla 5px hacia la derecha.

Ahora, debido a complicaciones que no me apetecen, tengo que establecer la posición: relativa; en el contenedor y coloque el ícono y el texto de manera que el ícono aparezca a la izquierda y el texto a la derecha.

EL PROBLEMA:

Cuando puntero del ratón sobre la etiqueta de anclaje, el icono mueve hacia la derecha, y el ratón termina sobre la parte superior del texto (que aparece). Lamentablemente, se llama a la función 'salir' si muevo el mouse desde el ícono al texto y la animación comienza a dar vueltas como loca. No entiendo qué está causando el evento de "salida" para disparar, ya que el mouse nunca deja la etiqueta de anclaje.

Gracias!

Answer 1

En lugar de vuelo estacionario puede utilizar el "mouseLeave eventos", que no se activan cuando los elementos secundarios en el camino "MouseEnter" y:

$('a.move').bind('mouseenter', function (e) { 
    $(this).children('span.text').toggle(); 
    $(this).animate({right: '5px'}, 'fast'); 
}) 
.bind('mouseleave', function (e) { 
    $(this).children('span.text').toggle(); 
    $(this).animate({right: '0px'}, 'fast'); 
});