Question

I am working on a website and want to modify the current code for a dropdown menu item. Here is the current code:

$(document).ready(function () { 

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(300);

    }, 
    function () {
        //hide its submenu
        $('ul', this).slideUp(300);         
    }
);

});

I tried changing the code to add a timeout with the intention of setting the timeout when the user took their mouse off of the menu so the menu didn’t toggle the slide up effect right away. The desired effect that I want is that if the user takes their mouse off the menu for like 200 ms but then moves it back to the menu it doesn’t do anything. So the menu waits like 300-400 ms to toggle the slide up function. Here is the code that I wrote that didn’t work. Part of it was because of the this in $('ul', this).slideUp(250); Anyways, here is the code that I tried to implement that didn’t work:

$(document).ready(function () { 
var timeoutID;
$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(250);
        window.clearTimeout(timeoutID);
        timeoutID = window.setTimeout(SlideUp, 350);
    },  
);
function SlideUp() {
    //hide its submenu
    $('ul', this).slideUp(250);         
}
});

What is the best way to have the program wait to toggle the slideup function? Any ideas are appreciated. Thanks.

Answer 1

This is what you wanted to do.

$(document).ready(function () { 
  var timeout;
  $('#nav li').hover(function () {
    //show its submenu
    clearTimeout(timeout);
    $('ul', this).slideDown(300);
  }, function () {
    //hide its submenu
    var self = this;
    timeout = setTimeout(function(){
      $('ul', self).slideUp(300);         
    }, 300);
  });
});​