Javascript hide with delay

Question

I've got some troubles with setTimeOut, i want to delay the hide of the submenu, but its not working at all.. :-(

I put the working line inside comments. What i have done wrong?

        $('ul.menu').find('li').mouseover(function() {
           $(this).children('ul, .mega-menu').css('display','block');

        }).mouseout(function() {
           setTimeout(this.children('ul, .mega-menu').style.display="none",4000); 
           /* $(this).children('ul, .mega-menu').css('display','none'); */
        });

Thanks for any help or ideas!

try setTimeout(this.children('ul, .mega-menu').hide(4000); — Mayank Vadiya
– Mayank Vadiya, Commented Oct 23, 2015 at 12:33
setTimeout(function(){ this.children('ul, .mega-menu').style.display="none"}, 4000); — An0nC0d3r
– An0nC0d3r, Commented Oct 23, 2015 at 12:40
you just needed to pass an anon callback function to setTimeout method — An0nC0d3r
– An0nC0d3r, Commented Oct 23, 2015 at 12:42

Sharique Hussain Ansari · Accepted Answer · 2015-10-23 17:19:34Z

1

Please use this to hide with delay:-

$('ul.menu').find('li').delay(4000).fadeOut();

This will wait for 4 sec then hide

To show use this:-

$('ul.menu').find('li').delay(6000).fadeIn();

So you can write like this:-

$(document).ready(function(){    
  $('ul.menu').find('li').hover(function() {
     var $megamenu = $(this).children('ul, .mega-menu'); 
     $megamenu.show();   
  },function() {
    var $megamenu = $(this).children('ul, .mega-menu');  
    $megamenu.delay(4000).fadeOut(); 
 });
});

you can also use fadeOut(1000) for animation effect.

If you want to use setTimeout you can use Dave Salomon answers or this:-

$(document).ready(function(){    
  $('ul.menu').find('li').hover(function() {
     var $megamenu = $(this).children('ul, .mega-menu'); 
     $megamenu.show();   
  },function() {
    var $megamenu = $(this).children('ul, .mega-menu');  
    setTimeout(function(){$megamenu.hide()},"4000"); 
 });
});

Hope this will help.

edited Oct 23, 2015 at 17:19

answered Oct 23, 2015 at 13:07

Sharique Hussain Ansari

1,4561 gold badge12 silver badges22 bronze badges

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

2 Comments

AtheistP3ace Over a year ago

As much as your answer works and improves on a better way to handle what he was trying to do while sticking in the context of jquery, this doesn't answer what he did wrong when using setTimeout, which is what he asked.

AtheistP3ace Over a year ago

Awesome! Just so original questioner or someone searching knows why it didn't work the way they tried. +1

Ruben Yeghikyan · Accepted Answer · 2015-10-23 12:34:33Z

0

Try this.

$('ul.menu').find('li').mouseover(function() {
    $(this).children('ul, .mega-menu').show();
}).mouseout(function() {
    $(this).children('ul, .mega-menu').hide(4000);     
});

answered Oct 23, 2015 at 12:34

Ruben Yeghikyan

4952 gold badges6 silver badges19 bronze badges

Comments

Griffith · Accepted Answer · 2015-10-23 12:42:01Z

0

You need to pass either a function (and not calling it) or code to setTimeout's first parameter. Try:

var that = this;
setTimeout(function(){
    that.children('ul, .mega-menu').style.display="none";
}, 4000);

edited Oct 23, 2015 at 12:42

answered Oct 23, 2015 at 12:36

Griffith

3,2171 gold badge19 silver badges30 bronze badges

Comments

Dave Salomon · Accepted Answer · 2015-10-23 13:00:26Z

0

Your scope in your setTimeout(function(){...}); isn't the same as the rest of the method. i.e. this is different.

Also, your code is a bit wonky.

$('ul.menu').find('li').mouseover(function() {
    var $submenu = $(this).children('ul, .mega-menu');
    $submenu.css('display','block');
}).mouseout(function() {
    var $submenu = $(this).children('ul, .mega-menu');
    setTimeout(function(){
        $submenu.hide();
    }, 4000);
});

http://jsfiddle.net/daveSalomon/hLk0s0bd/

answered Oct 23, 2015 at 13:00

Dave Salomon

3,2771 gold badge19 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript hide with delay

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related