HoverIntent or delay on dropdown panel

Question

I got some help with this previously, but I now need to add a delay on the button when you hover over it, so that it doesn't keep sliding down when a user swipes his mouse across the webpage.

I've got an example going on jsfiddle

I'm no expert as this so I any help would be greatly appreciated.

Answer 1

Try this:

$(".btn-slide").on('mouseover', function(e) {
            switch(e.type) {
                case 'mouseover':
                    $("#panel").delay(900).slideDown("slow");
                    break;
                    }
            return false;
        });    

        $(".close-slide").on('click', function(e) {
            switch(e.type) {
                case 'click':
                    $("#panel").slideUp("slow");
                    break;
                    }
            return false;
        }); 

You can change '900' to whatever works for you.

You can also use the hoverintent plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html