JQuery hover () does not work with absolutely positioned elements and animations

Question

I have an html that looks like this:

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

And I have a jquery event registered in the binding tag:

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

When I click on the anchor tag, it displays span.text and moves the 5px anchor to the right.

Now, due to complications that I don’t like, I have to establish a position: relative; on the container and completely place the icon and text so that the icon appears on the left and the text on the right.

PROBLEM:

, , ( ). , 'out' , , , . , "out", .

!

Answer 1

"mouseenter" "mouseleave", , :

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