If mouse over for over 2 seconds then show else don't?

Question

Here is a jQuery slide function I have applied to a div on hover in order to slide a button down.

It works fine except that now everytime someone moves in and out of it, it keeps bobbing up and down.

I figured if I put a one or two second delay timer on it it would make more sense.

How would I modify the function to run the slide down only if the user is on the div for over a second or two?

<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

You need to set a timer on mouseover and clear it either when the slide is activated or on mouseout, whichever occurs first:

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.