Trouble with syntax of adding setTimeout to existing jQuery script

Question

I want to add a setTimeout to the following code so that there's a short pause before the fadeOut effect executes.

$(document).ready(function() {  
    $('#menu li').hover(
        function() {
            $('ul', this).slideDown(50);
        }, 
        function() {
            $('ul', this).fadeOut(100);
        }
    );
});

This is what I'm trying, but I'm guessing the syntax must be wrong:

$(document).ready(function() {  
    $('#menu li').hover(
        function() {
            $('ul', this).slideDown(50);
        },
        function() {
            setTimeout(function() {
                $('ul,' this).fadeOut(100);
            });
        }
    );
});

Sorry if this is a dumb question. I'm a beginner with jQuery.

Answer 1

You could also need to clear the timeout when going over it using clearTimeout() (in case you hover in/out fast), something like this would work:

$(function() {  
  $('#menu li').hover(function() {
    clearTimeout($.data(this, 'timer'));
    $('ul', this).slideDown(50);
  }, function() {
    $.data(this, 'timer', setTimeout($.proxy(function() {
      $('ul,' this).fadeOut(100);
    }, this), 400));
  });
});

This stores/retrieves the timer ID using $.data(), and currently has a 400ms delay, just adjust accordingly.

Answer 2

The meaning of this is different within a setTimeout(). You need to reference the desired this in a variable or get the ul first and reference that.

var th = this;
setTimeout(function() {
    $('ul', th).fadeOut(100);
});

or

var $ul = $('ul',this);
setTimeout(function() {
    $ul.fadeOut(100);
});