バッファリングホバー効果からjQueryを停止する方法は？

Question

私は2つの画像を積み重ねて、ナビゲーションに使用しようとしています。カーソルを置くとjQueryを使用して0に戻り、カーソルが離れると1に戻ります。これは動作していますが、ここに私の問題があります。リストアイテムの上にマウスカーソルを数回前後に動かすと、効果がバッファリングされます。どのように私はバッファからそれを停止するのですか？ありがとう！

スクリプト

$(document).ready(function() { 
$("li").hover(function(){ 
$(this).fadeTo(250, 0); 
},function(){ 
$(this).fadeTo(350, 1); 
}); 
}); 

HTML

<div id="link1img"></div> 

    <ul> 
    <li id="link1"><a href="index.html">Home</a></li> 
    </ul> 

CSS

#link1 { 
background-image: url(../images/home_normal.png); 
background-repeat: no-repeat; 
text-indent: -9999px; 
position: absolute; 
height: 17px; 
width: 67px; 
left: 0px; 
top: 10px; 
} 
#link1img { 
background-image: url(../images/home_mo.png); 
background-repeat: no-repeat; 
position: absolute; 
height: 17px; 
width: 67px; 
left: 0px; 
top: 11px; 
} 

Answer 1

続行する前に.stop()の使用を中止し、古い効果：

$(document).ready(function() { 
    $("li").hover(function() { 
     $(this).stop().fadeTo(250, 0); 
    }, function() { 
     $(this).stop().fadeTo(350, 1); 
    }); 
}); 

Answer 2

使用.stop(true)がそのオブジェクト上で現在進行中の任意のアニメーションをキャンセルして、アニメーションキューからそれらを削除するので、あなたの次のアニメーションは即座に開始でき、現在のアニメーションを待つ必要はありません魚：

$(document).ready(function() { 
    $("li").hover(function(){ 
     $(this).stop(true).fadeTo(250, 0); 
    },function(){ 
     $(this).stop(true).fadeTo(350, 1); 
    }); 
}); 

詳細については、jQuery reference on .stop()を参照してください。