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が 2 回呼び出された理由がわかりません。ここでは、マウスのホバー (オーバーとアウト) にトグル機能を使用しました。ホバー (オーバーとアウト) については、こちらを参照してください。

于 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 に答える