How to show div for 10 seconds and then hide it

Question

I have div block which comes on a mouseover of another div.

div1 img // mouse over shows div2.

I want to show div2 for 10 seconds and then hide it , can you please tell me how to achive this

Thanks

Post a sample of HTML to get the best answer. There could be event-order issues if the divs are nested. — Silkster, Nov 08 '10 at 20:13
@silkster , next time i will definetly do that. I got the answer , thanks very much — kobe, Nov 08 '10 at 20:26
Possible duplicate of [jQuery show for 5 seconds then hide](http://stackoverflow.com/questions/3428766/jquery-show-for-5-seconds-then-hide) — Rick Smith, Oct 28 '15 at 20:26

Šime Vidas · Accepted Answer · 2010-11-08T20:38:21.973

35

$("#div1").mouseenter(function() {
    var $div2 = $("#div2");
    if ($div2.is(":visible")) { return; }
    $div2.show();
    setTimeout(function() {
        $div2.hide();
    }, 10000);
});

Another way to go:

$("#div1").mouseenter(function() {
    var $div2 = $("#div2");
    if ($div2.data("active")) { return; }
    $div2.show().data("active", true);
    setTimeout(function() {
        $div2.hide().data("active", false);
    }, 10000);
});

edited Nov 08 '10 at 20:38

answered Nov 08 '10 at 20:06

Šime Vidas

182,163
62
281
385

@sime one more thing , if it is visible it should hide after 10 seconds..we shouldn't return there right. IF it is visible we hve to set t.he setTimout function on that – kobe Nov 08 '10 at 20:19
@gov Is the #div2 hidden in the beginning? – Šime Vidas Nov 08 '10 at 20:23
@sime , the div2 will be hidden onload of the page. – kobe Nov 08 '10 at 20:26
@gov When you hover #div1 for the first time, #div2 will be hidden, and the function will not return. Instead the #div2 will be shown and the timeout will be set. Now, if you hover again, and #div2 is still visible (the 10 seconds haven't passed yet), the function will return - because we don't want to set yet another timeout. – Šime Vidas Nov 08 '10 at 20:29
1

+1 I think this is the only answer that safeguards against multiple timeouts being set. – user113716 Nov 08 '10 at 20:41

score 20 · Answer 2 · edited Oct 04 '19 at 18:51

20

Use jQuery's delay(n); method http://api.jquery.com/delay/

 $(function() {
      $("#div1 img").hover(function(){
        $("#div2").show().delay( 10000 ).hide(0);
      });
    });

edited Oct 04 '19 at 18:51

Ram Patra

16,266
13
66
81

answered Nov 08 '10 at 20:05

FatherStorm

7,133
1
21
27

6

There are two mistakes in your code: 1. the hover() method, when supplied with only one function argument, executes that function on both mouseenter **and mouseleave**, which is clearly not what the OP wants, 2. the delay() method does only work with animations and not with show() or hide() (Note: if you supply an argument to show() or hide(), it becomes an animation and then it does work). Your code `show().delay(10000).hide()` will hide the element **immediately** and not after 10 seconds. – Šime Vidas Nov 08 '10 at 23:26
1

See [answer by @user113716](http://stackoverflow.com/a/4128518/616644) for example of correct usage. – Rick Smith Oct 28 '15 at 20:25

user113716 · Answer 3 · 2010-11-08T22:12:00.220

The accepted answer is the only good one here.

I'm leaving an answer because most of the others fail for various reasons.

If you want to use .delay(), the item delayed needs to be part of the queue. The .hide() method is not. But if you give .hide() a duration, it is.

So you can do this:

var $div2 = $('#div2');

$('#div1').mouseenter(function() {
    $div2.show().delay( 10000 ).hide( 0 );
});

The 0 duration makes .hide() part of the queue. You don't want to use .hover() because it will fire once for mouseenter and once for mouseleave. This is not what was wanted.

Some of the answers using setTimeout() fail because if there are several mouseenter events, then several setTimeout() calls are made. The accepted answer gets around this.

I like this one more than the accepted answer if one is using jQuery. Cheers! — Ram Patra, Oct 04 '19 at 18:50

score 8 · Answer 4 · answered Nov 08 '10 at 20:03

8

as part of the mouseover function:

setTimeout(function(d){
  item.hide();
}, 10000);

This assumes var item is the jquery object of the div you want to hide. The parameter 10000 is the delay in milliseconds. 10s * 1000ms/1s = 10000ms

answered Nov 08 '10 at 20:03

zzzzBov

174,988
54
320
367

I voted for this one because even though this question is tagged as [jquery] it does not ask for a jQuery solution specifically. – Wally Lawless Nov 08 '10 at 20:15

hunter · Answer 5 · 2010-11-08T21:14:28.360

3

$(function() {
    $("div1 img").hover(
        function() { //mouse over show div
            $("div2").show(); //.delay(10000).fadeOut();
        },
        function() { // mouse out, start timer to hide
            //$("div2").delay(10000).fadeOut();
        }
    );    
});

edited Nov 08 '10 at 21:14

answered Nov 08 '10 at 20:03

hunter

62,308
19
113
113

you mean setTimeout? setInterval will repeat every 10s unless cancelled. – zzzzBov Nov 08 '10 at 20:04
@ hunter will this hide div 2 after 10 seconds? – kobe Nov 08 '10 at 20:05
i want to show div2 for 10 seconds , after 10 seconds it should fadeout – kobe Nov 08 '10 at 20:05
to make things simeple , if div2 is present more than 10 seconds on screen , it should fade out.. – kobe Nov 08 '10 at 20:07

score 2 · Answer 6 · answered Nov 08 '10 at 20:03

2

var $div2 = $('#div2');


$('#div1').mouseover( function(){
  $div2.show();

  setTimeout( function(){
    $div2.hide();
  }, 1000*10);

});

answered Nov 08 '10 at 20:03

Harmen

22,092
4
54
76

How to show div for 10 seconds and then hide it

6 Answers6