Question

我有一个导航，根据光标在列表上的位置，有一个小图像移动到列表项。但由于某些原因，当我“鼠标悬停”另一个元素

时会出现某种滞后现象

//MOVE MOUSE ICON -- Mouse over
$('#lava_menu li').mouseover(function(){
var pos = $(this).position();
$("#google").animate({
    left: pos.left,
    right: pos.right,
    top: pos.top,
    bottom: pos.bottom
    },"slow");   
    break;  
});


//MOVE MOUSE ICON --Mouse out
$('#lava_menu li').mouseout(function(){
    var pos = $("li.current").position();
 $("#google").animate({
    left: pos.left,
    right: pos.right,
    top: pos.top,
    bottom: pos.bottom
    },"fast");  
    break;      
});

http://jsfiddle.net/Komlan/NgEkr/

Answer 1

尝试使用jquery http://api.jquery.com/stop/

的stop方法

更改您的javascript代码，如

//MOVE MOUSE ICON --Mouse out
$('#lava_menu li').mouseout(function(){
    var pos = $("li.current").position();
         $("#google").animate({
            left: pos.left,
            right: pos.right,
            top: pos.top,
            bottom: pos.bottom
            },"fast").stop(true, true);  //using stop
});

您需要一些额外的代码才能使其更有效

演示此http://jsfiddle.net/NgEkr/1/

Answer 2

Working Demo Here 现在解决了图片根据需要来回移动的问题。

mouseover和mouseout的代码被调用两次，不知道原因。在这里，我使用了鼠标悬停（over和out）的切换功能。请参阅this了解悬停（过度和离开）。

改进导航动画

2 个答案: