我有4个图标，当鼠标移到上面时，使用jQuery animate滚动一个div。
问题是，当我在所有四个图标上快速，来回悬停时，悬停功能被链接在一起，甚至在鼠标退出时，滚动动画仍然运行，直到所有发生的鼠标悬停事件都完成。
我想让它这样的鼠标出来，所有的事件，正在等待被执行，被取消！
在下面查找源代码：

<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并查看侧栏！