Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

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?

Problem courtesy of: user1266515

Solution

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.

Solution courtesy of: Jon

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×