CODEWITHSUNDEEP
jquerytimeoutdelaydrop-down-menu
any_h
any_h

Reputation: 568

Adding delay to jquery drop down menu

I'm trying to add delay to a simple drop down menu. With the following code I get a delay but wrong kind. When I move my mouse over the menu really fast, it delays it but still opens it after the 300ms. The right behavior would be to open the menu when the mouse has hovered 300ms on it, same when leaving it.

$('#menu-item-1226:not(.parent-pageid-1225 #menu-item-1226)').hover(function(){
    var menu = this;
    setTimeout(function(){
        $(menu).find('ul').slideToggle(100);
    }, 300);
});

Do I have to stop it somehow or what is the right approach here?
Thanks in advance

Upvotes: 1

Views: 8574

Answers (5)

Muhammad Omar ElShourbagy
Muhammad Omar ElShourbagy

Reputation: 7068

This Post contains sample fiddle code and its working fine.

JQuery dropdown menu using slideup and slidedown on hover is jumpy

Upvotes: 0

Nick N.
Nick N.

Reputation: 13559

This is probably what you are looking for, however using the Jquery Plugin HoverIntent will work as well, and maybe even better.

without hover intent:

$(function() {
        var timer;
    $('#Header li').hover(function(){
                if(timer) {
                        clearTimeout(timer);
                        timer = null
                }
                timer = setTimeout(function() {
                           $(this).find('ul').slideToggle(100);
                }, 500)
    },
    // mouse out
    });

});

with hover intent plugin

$("#Header li").hoverIntent({
    sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
    interval: 50,   // number = milliseconds of polling interval
    over: function () {
        $('ul', this).slideDown(220);
    },  // function = onMouseOver callback (required)
    timeout: 0,   // number = milliseconds delay before onMouseOut function call
    out: function () {
        $('ul', this).hide();
    }    // function = onMouseOut callback (required)
});

Upvotes: 6

dinesh
dinesh

Reputation: 837

$(menu).find('ul').delay(300).slideToggle(100);

Upvotes: -2

DiogoDoreto
DiogoDoreto

Reputation: 883

Check out this plugin: http://cherne.net/brian/resources/jquery.hoverIntent.html :)

Upvotes: 1

Teun Pronk
Teun Pronk

Reputation: 1399

just use delay()

$(menu).find('ul').delay(300).slideToggle(100);

You say delay in ms, after that just your effect.

Upvotes: -1

Related Questions