jQuery最も最近のホバーのみにアニメーション

Question

私はアイテムのリストにリンクされたカルーセルを持っていて、それらのアイテムのそれぞれにカーソルを置くと、カルーセルを別個の位置にアニメートします。

問題は、それらのリスト項目の束の上にすばやく移動すると、問題が発生しています。これらのリスト項目のそれぞれにアニメーションがトリガーされます。私が望むのは、最新のホバリングのいずれかに自動的に調整することです。そのため、不必要な動きが起こることはありません。ここで

はjQueryのホバーのためにある：

$('#item1 a').hover(function() { 
    $('#hero-slider ul').animate({ 
     right: '0' 
    }, 500); 
}); 
$('#item2 a').hover(function() { 
    $('#hero-slider ul').animate({ 
     right: '980' 
    }, 500); 
}); 
$('#item3 a').hover(function() { 
    $('#hero-slider ul').animate({ 
     right: '1960' 
    }, 500); 
}); 
$('#item4 a').hover(function() { 
    $('#hero-slider ul').animate({ 
     right: '2940' 
    }, 500); 
}); 

私は矢継ぎ早にそれらの項目の全ての上に置くと、それが停止する前に、すべての位置に移動します。

Answer 1

.stop()を機能に追加してみてください。

$('#carProd4 a').hover(function() { 
    $('#hero-slider ul').stop().animate({ 
     right: '2940' 
    }, 500);