Question

How can we set time or delay of 5 seconds in dropdown.

Requirement are like this: When someone hover over main menu then its shows that submenu for 5 sec only when your mouse is away from main menu or sub menu.

For now i have increased the height of ul upto height of banner images so that it will not be hide untill you move your mouse out of that banner area.

Below is the site link: http://transitions.advisorproducts.com/home

and this is one reference site link : http://focusyou.com/home (my requirement are like this, but i don’t want to copy this code, i want to implement in my own code)

Below is the js:

$(function()
{
    $("ul.dropdown li").hover(function()
    {
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        $(this).removeClass("hover");
        $('ul:first',this).css('visibility', 'hidden');
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

Thanks in advance 🙂

You can test here : http://jsfiddle.net/alokjain_lucky/KQAYT/2/

Answer 1

Try this:

$(function()
{
    var timer = 0;
    $("ul.dropdown > li").hover(function()
    {
        if (timer) clearTimeout(timer);
        $("ul.dropdown > li").removeClass("hover");
        $("ul.dropdown > li ul").css('visibility', 'hidden');
        $(this).addClass("hover");
        $('ul:first',this).css('visibility', 'visible');
    }, function()
    {
        var link = $(this);
        timer = setTimeout(function(){
            $(link).removeClass("hover");
            $('ul:first',link).css('visibility', 'hidden');
        }, 5000);
    });
    $("ul.dropdown li ul li:has(ul)").find("a:first").append(" » ");
});

1. setTimeout functions will add a delay for a specified number of milliseconds.
2. this keyword will not work inside setTimeout function, so i have used a reference to value of this in variable link.

Here’s the working example of code: http://jsfiddle.net/alokjain_lucky/KQAYT/