Julesfrog
Julesfrog

Reputation: 1113

jQuery setTimeout for drop down navigation

I'm using a jQuery-based drop down menu and would like to add a delay to the drop down animation (slideDown). I looked around to see how to implement setTimeout but couldn't get it to work with my code. Can anybody help?

This is my code:

$(document).ready(function() {
    function megaHoverOver(){
        $(this).find(".sub").slideDown(500);    
    }

    function megaHoverOut(){ 
        $(this).find(".sub").slideUp(150);      
    }

    var config = {    
         sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
         interval: 0, // number = milliseconds for onMouseOver polling interval    
         over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
         timeout: 0, // number = milliseconds delay before onMouseOut    
         out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
    };

    $("#mainnav-first li").hoverIntent(config);
});

By the way, I tried the following but it didn't work:

$(document).ready(function() {
    setTimeout(function megaHoverOver(){
        $(this).find(".sub").slideDown(500);    
    }, 500);

    function megaHoverOut(){ 
        $(this).find(".sub").slideUp(150);      
    }

    var config = {    
         sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)    
         interval: 0, // number = milliseconds for onMouseOver polling interval    
         over: megaHoverOver, // function = onMouseOver callback (REQUIRED)    
         timeout: 0, // number = milliseconds delay before onMouseOut    
         out: megaHoverOut // function = onMouseOut callback (REQUIRED)    
    };

    $("#mainnav-first li").hoverIntent(config);
});

Upvotes: 0

Views: 1032

Answers (1)

jncraton
jncraton

Reputation: 9132

You should be able to achieve that using delay():

$(this).find(".sub").delay(500).slideDown(500);

http://api.jquery.com/delay/

Upvotes: 3

Related Questions