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