JavaScriptでイベントチェインを防止する方法

Question

私は4つのアイコンを持っています。マウス上にjquery animateを使ってdivをスクロールします。

問題は、4つのアイコンすべてをすばやく前後に移動し、ホバー機能が連鎖していてもマウスが出ていてもスクロールアニメーションが実行され、発生したイベントのマウスがすべて終了するまでです。

私はマウスのようにしたい、実行されるのを待っているすべてのイベントがキャンセルされます！

検索下のソース：

<div id="sidebar-slider-nav"> 
    <div class="testimonials" onmouseover="sidebar_slider(0)"><img src="images/icons/testimonialsIcon.png"/></div> 
    <div class="facebook" onmouseover="sidebar_slider(280)"><img src="images/icons/facebookIcon.png"/></div> 
    <div class="twitter" onmouseover="sidebar_slider(560)"><img src="images/icons/twitterIcon.png"/></div> 
    <div class="news" onmouseover="sidebar_slider(840)"><img src="images/icons/blogIcon.png"/></div> 
    <div class="clear"></div> 
</div> 

と呼ばれている機能は次のとおりです。

function sidebar_slider(val){ 
    $('#sidebar-slider').animate({scrollLeft:val},500) 
} 

誰もがこれを行うには良い方法を知っていますか？

私の問題の例として、http://a3mediauk.co.ukに移動し、サイドバーを見てください！ありがとうございます

Answer 1

$('#sidebar-slider').stop(); 

要素の既存のアニメーションを消去します。これを既存のコードにチェーンすることもできます：

$('#sidebar-slider').stop().animate({scrollLeft:val},500)