マウスを2秒以上押し続けると、それ以外は表示されませんか？

Question

ここでは、ボタンをスライドさせるために、ホバー上のdivに適用したjQueryスライド機能を示します。

誰かがその中を出入りするたびに、上下に揺れ続けます。

もし私がそれに1〜2秒の遅延タイマーを置くと、それは理にかなっています。

ユーザーがdivに2〜3秒以上いる場合にのみスライドを実行するように関数を変更するにはどうすればよいですか？

あなたはどちらか早い方、マウスオーバーでタイマーを設定し、スライドが有効かマウスアウトにされたときのいずれか、それをクリアする必要があり

<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

：

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); 
});