CODEWITHSUNDEEP
jqueryhoverdelaysubmenu
Hakan
Hakan

Reputation: 3885

Delay for hover function in jquery

I did my own delay function for my dropdown menu. Since I'm kind of new to JavaScript I would like to know if this can be done in a better way?

var $hasSubpages = $("#divContainer .classForPagesWithSubpages");

function theFunction(){$('#theID').find('.classForChild').slideDown(400);}

var timer;
$hasSubpages.hover(
    function (){
        timer = setTimeout(theFunction, 500);
        $(this).attr('id','theID');
    },
    function(){
        clearTimeout(timer);
        $(this).attr('id','').find('.classForChild').slideUp(400);
    }
);

Upvotes: 0

Views: 1027

Answers (2)

Hussein
Hussein

Reputation: 42818

Use the delay() function

$('#test').slideDown(500).delay(3000).slideUp(500);

This will cause the element to slidedown wait 3 seconds then slide back up

Check working example at http://jsfiddle.net/wanJf/

Upvotes: 0

sushil bharwani
sushil bharwani

Reputation: 30187

there is already a beautiful plugin with the name hoverIntent already developed for that.

http://plugins.jquery.com/project/hoverIntent

If you need any help understanding how it works i can tell you. Otherwise its very easy to work with.

Upvotes: 1

Related Questions