jquery timeout on dropdown menu (hoverintent)

Question

$(document).ready(function () { 

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(220);

    }, 
    function () {
        //hide its submenu
        $('ul', this).slideUp(220);         
    }
);

Hello, I want to set a "delay" on my dropdownmenu, because the respond time is too fast. When I accidently hover 4times in a row(it slides up and down al the time). I read and tried the HoverIntent jquery plugin. But I am not able to implement it with this easy jquery menu.

Is there anybody with such experience? I would really be thankful, I tried to implement it but without success (I am bad at jquery). Please give some hint/code, thank you!

Answer 1

You have to stop the currently running animation. Try this,

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).stop().slideDown(220);

    }, 
    function () {
        //hide its submenu
        $('ul', this).stop().slideUp(220);         
    }
);

Answer 2

Try the following to prevent the hover function firing to many times.

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).stop().slideDown(220);

    }, 
    function () {
        //hide its submenu
        $('ul', this).stop().slideUp(220);         
    }
);