How to tell .hover() to wait?

Question

I have a drop down menu. Now when it\'s slided down to multiple levels, I\'d like it to add wait time for like 2 secs, before it disappears, so the user can get back in, whe

Answer 1

This will make the second function wait 2 seconds (2000 milliseconds) before executing:

$('.icon').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('li.icon > ul').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
    $(this).data('timeout', t);
});

It also clears the timeout when the user hovers back in to avoid crazy behavior.

This is not a very elegant way of doing this, however. You should probably check out the hoverIntent plugin, which is designed to solve this particular problem.

Answer 2

var timer;

var delay = 200;

$('#hoverelement').hover(function() {

    on mouse hover, start a timeout

    timer = setTimeout(function() {

       Do your stuff here 

    }, delay);

}, function() {

   Do mouse leaving function stuff here    

    clearTimeout(timer);
});

//edit: instert code

Answer 3

or you could simply use transition:all 2s ease-in-out. make sure that you add -webkit, -moz and -o for different browsers.