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('.class开发者_C百科ForChild').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);
    }
);

---

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.

---

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/