2011-12-12 35 views
5

Tôi có một đoạn mã về cơ bản nói: nếu bạn cuộn nó, thì một thứ khác xuất hiện và nếu bạn cuộn ra thì nó sẽ biến mất.Làm thế nào để ngăn chặn chuột nhập/xuất hiện quá nhiều lần

Vấn đề là nếu tôi lấy con chuột và cuộn qua ra/vào quá nhiều lần sau đó các yếu tố xuất hiện/biến mất quá nhiều lần (vì tôi đã tạo ra rất nhiều sự kiện cho nó do nhầm lẫn)

mã của tôi trông giống như thế này:

$('div.accordionContent').mouseenter(function() 
{ 
    $(this).find(".something").animate({left: 0}, 300)}).mouseleave(function() { 
    $(this).find(".something").animate({ 
    left: -200}, 500);; 
}); 

Làm cách nào để nói điều đó tránh nhiều lần lơ lửng?

Tôi sử dụng jQuery 1.4.3 nếu điều đó giúp ..

Trả lời

5

Thay vì tránh nhiều lần kích hoạt, hãy thử dừng hoạt ảnh trước khi bắt đầu hoạt ảnh khác.

$('div.accordionContent').mouseenter(function() { 
    $(this).find(".something").stop().animate(...) 
}); 
+0

tùy chọn tốt! thậm chí tôi đã thực hiện như vậy trong mã của tôi. – Murtaza

+0

Trong trường hợp của tôi, tôi không sử dụng hoạt hình (chỉ cần thêm/xóa tên lớp) và do đó không thể sử dụng 'stop'. Bất kỳ giải pháp cho điều này? – apnerve

1

Sự cố là bạn kích hoạt các sự kiện mới trước khi sự kiện cũ kết thúc. Để ngăn chặn điều này, bạn có thể ngừng nghe (loại bỏ người nghe) cho các sự kiện trong tương lai cho đến khi các sự kiện hiện tại đã hoàn thành nhiệm vụ của họ.

0

jQuery.animate có tùy chọn "xếp hàng". Nếu bạn đặt thành false, tôi nghĩ sự kiện sẽ không kích hoạt nhiều. Tôi nghĩ =)

0

Nếu bạn muốn làm điều đó một cách chính xác, tôi đề nghị này

$('div.accordionContent').bind('mouseenter mouseleave', function(e){ 

    var $something = $(this).find(".something"); 

    if(e.type == 'mouseenter'){ 
     $something.animate({left:0}, {queue:false, duration:300 }); 
    } else { 
     $something.animate({left:-200}, {queue:false, duration:500 }); 
    } 
}); 
0

Bạn có thể thử cái này:

$('div.accordionContent').mouseenter(function(){ 
    var div = $(this); 
    clearTimeout(window.me); 
    window.me = setTimeout(function(){ 
     div.find(".something").animate({left: 0}, 300)}).mouseleave(function(){ 
      $(this).find(".something").animate({ 
      left: -200}, 500); 
     }); 
    },50); 
}); 

Ý tưởng ở đây là để hủy mouseenter hiện nếu chưa đạt đến độ trễ 50.

Các vấn đề liên quan