CODEWITHSUNDEEP
jquery
tjcss
tjcss

Reputation: 860

Add delay to horizontal drop down, vertical slideout - jQuery

I need to stop my drop down items from "sticking" when I hover over the items quickly, so my idea is to add a delay to prevent the sub-item from hovering out until you've hovered over for a certain period of time.

I have a standard nested un-ordered list set up, styled with CSS and showing/hiding with jQuery, code below.

In addition to this, I would like to add a hide delay on the last level items. As the "join" between the second ul and the last ul is only 10 pixels or so, you have to move the mouse over really precisely for it to work and not hide the nav altogether.

How do I A) Add a delay to the second level ul from showing and B) add a delay to the third level ul from hiding? I'm nottalking about the speed, but adding a physical delay.

Here's my code:

$(function() {
    $('ul.sub-menu').hide();
    $('.sub-menu ul').hide();

    $('#menu-navigation li').hover(function(){
        $(this).children('ul').slideDown("fast");
        },
    function(){
        $(this).children('ul').hide();
    });

    $('#menu-navigation ul li').hover(function(){
        $(this).children('ul').slideDown("fast");
        },
    function(){
        $(this).children('ul').hide();
    }); 

});

Upvotes: 0

Views: 738

Answers (2)

Jasper
Jasper

Reputation: 76003

Set a timeout and save it to a variable so you can cancel the timeout when you want:

var second_lvl_timer;
$('#menu-navigation li').hover(function(){
    var $this_hover_in = $(this);
    second_lvl_timer = setTimeout(function () {
        $this_hover_in.children('ul').slideDown("fast");
    }, 500);
},
function(){
    var $this_hover_out = $(this);
    clearTimeout(second_lvl_timer);
    $this_hover_out.children('ul').hide();
});

This will call a timeout when you mouseover the #menu-navigation li element and that timeout will be canceled if you mouseout before the timer is called (half a second in the above example).

You can do the same but backwards for the third level:

var third_lvl_timer;
$('#menu-navigation ul li').hover(function(){
    var $this_hover_in = $(this);
    clearTimeout(third_level_timer);
    $this_hover_in.children('ul').slideDown("fast");
},
function(){
    var $this_hover_out = $(this);
    third_lvl_timer = setTimeout(function () {
        $this_hover_out.children('ul').hide();
    }, 500);
});

--UPDATE--

I updated the code by changing the $(this) statement in the setTimeout anonymous functions to variables created on hovering in/out. Here's a jsfiddle: http://jsfiddle.net/hzPg4/. I noticed that since the second level hover-out does not require a timeout, if you hover off of the whole list then it immediately slides-up and hides the third level information.

Upvotes: 1

Andrew Peacock
Andrew Peacock

Reputation: 771

For the first question, you could use the jquery delay method to pause the queue for a time, but as far as I now the subsequent methods will still run even if you are no longer hovering so this will not really help.

For the second question, again I would try adding the delay method to the queue before your hide call. 

$('#menu-navigation li').hover(function(){         
    $(this).children('ul').slideDown("fast");         
    },    
    function(){         
    $(this).children('ul').delay(500).hide();     
});

Upvotes: 0

Related Questions