javascript - 如何防止 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)