Nếu di chuột qua trong hơn 2 giây thì hiển thị không?

Question

Đây là một chức năng trượt jQuery tôi đã áp dụng cho một div trên di chuột để trượt một nút xuống.

Nó hoạt động tốt ngoại trừ việc bây giờ mỗi khi có ai đó di chuyển vào và ra khỏi nó, nó liên tục nhấp nhô lên xuống.

Tôi đã tìm ra nếu tôi đặt bộ hẹn giờ trễ một hoặc hai giây vào nó thì sẽ có ý nghĩa hơn.

Làm cách nào để sửa đổi chức năng để chỉ chạy trang trình bày nếu người dùng ở trên div trong hơn một hoặc hai giây?

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js "></script> 
<script type="text/javascript"> 

$("#NewsStrip").hover(
function() { 
    $("#SeeAllEvents").slideDown('slow'); }, 
function() { 
    $("#SeeAllEvents").slideUp('slow'); 
}); 

</script> 

Answer 1

Bạn cần phải thiết lập một bộ đếm thời gian trên mouseover và xóa nó hoặc khi trượt được kích hoạt hoặc khi di chuột ra, nào xảy ra trước:

var timeoutId; 
$("#NewsStrip").hover(function() { 
    if (!timeoutId) { 
     timeoutId = window.setTimeout(function() { 
      timeoutId = null; // EDIT: added this line 
      $("#SeeAllEvents").slideDown('slow'); 
     }, 2000); 
    } 
}, 
function() { 
    if (timeoutId) { 
     window.clearTimeout(timeoutId); 
     timeoutId = null; 
    } 
    else { 
     $("#SeeAllEvents").slideUp('slow'); 
    } 
}); 

See it in action.

Answer 2

var time_id; 

$("#NewsStrip").hover(
function() { 
    if (time_id) { 
     clearTimeout(time_id); 
    } 
    time_id = setTimeout(function() { 
     $("#SeeAllEvents").stop(true, true).slideDown('slow'); 
    }, 2000); 
}, function() { 
    if (time_id) { 
     clearTimeout(time_id); 
    } 
    time_id = setTimeout(function() { 
     $("#SeeAllEvents").stop(true, true).slideUp('slow'); 
    }, 2000); 
});