的jQuery悬停（）不是绝对定位的元素和动画工作

Question

我有一些HTML，看起来像这样：

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

而且我有一个jQuery事件注册的锚标记：

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

当我将鼠标悬停在锚标记上时，它会显示span.text并将锚点5px向右移动。

现在，由于我不想进入并发症，我必须设置位置：相对;放在容器上并绝对放置图标和文字，以便图标出现在左侧，文字在右侧。

该问题：

当我鼠标在锚标签，图标向右移动，并且将鼠标悬停在文本（出现）的顶部结束。不幸的是，如果我将鼠标从图标移动到文本并且动画开始像疯了一样循环，那么'out'函数会被调用。我不明白是什么导致“out”事件触发，因为鼠标永远不会离开锚标签。

谢谢！

Answer 1

而是悬停，你可以使用“的mouseenter”和“鼠标离开”事件，当子元素的方式获得不火：

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