как предотвратить цепочку событий в JavaScript

Question

У меня есть 4 иконки, которые при наведении мыши прокручивают div с помощью jquery animate.

Проблема в том, что когда я быстро наведите курсор на все четыре значка, назад и вперед, функции наведения соединены вместе и даже при наведении мыши, анимация прокрутки будет работать до тех пор, пока не будут завершены все события над мышью.

Я хочу сделать так, чтобы при отключении мыши все события, ожидающие выполнения, были отменены!

найдите источник ниже:

<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 ипосмотрите на боковую панель!Thankyou

Answer 1

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

Очистит любую существующую анимацию на элементе. Вы также можете связать это в свой существующий код:

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