jQuery delay on CSS change

Question

I'm looking to add a 300 millisecond delay to the function of this jQuery but not 100% sure where it should sit?

I understand that I need to add .delay(300) but wasn't too sure where it has to go in the code below.

$("#menu1-holder").mouseleave(function(){
    $('#menu1-holder').css('display', 'none');
});

OR... should I be using setTimeout? If so where should that be placed?

Answer 1

$("#menu1-holder").mouseleave(function(){
var that = $(this);
setTimeout(function(){
   that.css('display', 'none');
}, 300);    
});

Answer 2

You can also do like this with simple script:

$("#menu1-holder").mouseleave(function(){
    $('#menu1-holder').delay(300).css('display', 'none');
});

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