Reputation: 1113
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
Reputation: 9132
You should be able to achieve that using delay():
$(this).find(".sub").delay(500).slideDown(500);
Upvotes: 3