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?

Headshota · Accepted Answer · 2011-11-23 08:39:53Z

6

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

answered Nov 23, 2011 at 8:39

Headshota

21.4k13 gold badges63 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sandeep · Accepted Answer · 2011-11-23 08:59:51Z

2

You can also do like this with simple script:

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

answered Nov 23, 2011 at 8:50

sandeep

93.2k24 gold badges140 silver badges156 bronze badges