vol stationnaire jQuery() ne fonctionne pas avec des éléments en position absolue et l'animation

Question

je code HTML qui ressemble à ceci:

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

et j'ai un événement jquery enregistré sur l'étiquette d'ancrage:

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

Quand je souris sur la balise d'ancrage, elle affiche le span.text et déplace l'ancre 5px vers la droite.

Maintenant, en raison de complications auxquelles je ne veux pas entrer, je dois définir la position: relative; sur le conteneur et positionnez absolument l'icône et le texte pour que l'icône apparaisse à gauche et le texte à droite.

LE PROBLÈME:

Quand je souris sur la balise d'ancrage, l'icône se déplace à droite, et la souris finit par au-dessus du texte (qui apparaît). Malheureusement, la fonction 'out' est appelée si je déplace ma souris de l'icône vers le texte et que l'animation commence à tourner comme une folle. Je ne comprends pas ce qui déclenche l'événement "out", car la souris ne quitte jamais la balise d'ancrage.

Merci!

Answer 1

Au lieu de vol stationnaire vous pouvez utiliser les événements « mouseenter » et « mouseLeave », qui ne se déclenchent pas lorsque des éléments enfants obtiennent de la manière:

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