如何防止javascript中的事件链接

Question

我有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并查看侧边栏!谢谢

Answer 1

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

将清除元素上的任何现有动画.您也可以将其链接到现有代码中:

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