0

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

//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/

4

2 回答 2

0

工作演示 现在解决了图像根据需要来回移动的问题。

你的代码mouseover和mouseout被调用了两次不知道为什么。在这里，我使用了鼠标悬停（over and out）的切换功能。请参阅this以了解悬停（over and out）。

于 2013-02-15T05:10:58.083 回答
0

尝试使用stopjquery http://api.jquery.com/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/的演示

于 2013-02-12T04:55:08.387 回答