Wenn die Maus länger als 2 Sekunden gedrückt wird, dann zeige sonst nicht?

Question

Hier ist eine jQuery-Folie-Funktion, die ich auf ein div auf Hover angewendet habe, um eine Taste nach unten zu schieben.

Es funktioniert gut, außer dass jetzt jedes Mal, wenn jemand ein- und aussteigt, es auf und ab wippt.

Ich dachte, wenn ich einen ein oder zwei Sekunden Delay-Timer auf ihn setzen würde es mehr Sinn machen.

Wie würde ich die Funktion ändern, um die Folie nur dann herunterzufahren, wenn der Benutzer für mehr als ein oder zwei Sekunden auf dem Div ist?

<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

Sie benötigen einen Timer mit der Maus darüber setzen und löschen sie entweder, wenn der Schieber aktiviert ist oder auf mouseout je nachdem, welcher Fall zuerst eintritt:

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