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