cách ngăn chặn chuỗi sự kiện trong javascript

Question

Tôi có 4 biểu tượng, khi di chuột qua, hãy cuộn một div bằng cách sử dụng jquery animate.

Vấn đề là khi tôi di chuột qua tất cả bốn biểu tượng một cách nhanh chóng, qua lại, các chức năng di chuột được ghép lại với nhau và thậm chí khi di chuột ra, hoạt ảnh cuộn vẫn chạy cho đến khi tất cả các sự kiện trên chuột xảy ra.

Tôi muốn thực hiện điều này, tất cả các sự kiện đang chờ được thực thi sẽ bị hủy!

tìm nguồn dưới đây:

<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> 

và chức năng mà được gọi là:

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

không ai biết một cách tốt hơn để làm điều này?

để biết ví dụ về sự cố của tôi, vui lòng điều hướng đến http://a3mediauk.co.uk và nhìn vào thanh bên! Thankyou

Answer 1

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

Sẽ xóa mọi hoạt ảnh hiện có trên phần tử. Bạn cũng có thể chuỗi mã này vào mã hiện tại của mình:

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