Hide/Show A Div After A Few Seconds

Question

I have a Div. I would like to hide it after 10 seconds then show it after 30 seconds then hide it again after 10sec and so on.

I have this code but it doesn't work the way I had imagined it.

setTimeout(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
            $("#myDiv").show(); 
    },30000);
},10000);

Any advice?

You should read this: http://stackoverflow.com/questions/729921/settimeout-or-setinterval — Alberto, Mar 20 '14 at 09:15
I have added an alternate answer below for you, which looks pretty cool (uses the `timing` library) so your code becomes: `$("#myDiv").repeat().wait(10000).show().wait(30000).hide();` which I find far more readable. Recommend looking at that lib :) — iCollect.it Ltd, Mar 20 '14 at 09:46

score 8 · Accepted Answer · answered Mar 20 '14 at 09:13

8

Just loop it like

function toggleDiv() {
    setTimeout(function () {
        $("#myDiv").hide();
        setTimeout(function () {
            $("#myDiv").show();
            toggleDiv();
        }, 30000);
    }, 10000);
}
toggleDiv();

Demo: Fiddle

answered Mar 20 '14 at 09:13

Arun P Johny

384,651
66
527
531

I saw your fiddle Arun, I'm just learning Javascript now, why should we use `toggleDiv();` when it works without calling this function – user3004356 Mar 20 '14 at 09:23
@user3004356: `toggleDiv` is just the code itself. This is calling the function recursively. If you do not call it in this example it will only run once. Only setInterval calls a function repeatedly. – iCollect.it Ltd Mar 20 '14 at 09:28
perfect! i have not thought about using a recursive function. Thanks! – user3360031 Mar 20 '14 at 09:43

Rohan Kumar · Answer 2 · 2014-03-20T09:55:38.547

1

Use setInterval like,

setInterval(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
        $("#myDiv").show(); 
    },10000);
},30000);

Demo

You can set time accordingly like for your problem try,

setInterval(function() { 
    $("#myDiv").hide(); 
    setTimeout(function() {     
       $("#myDiv").show(); 
    },3000);
},4000);

Updated Demo

edited Mar 20 '14 at 09:55

answered Mar 20 '14 at 09:14

Rohan Kumar

40,431
11
76
106

2

the interval will get called every 10 secs... where it takes 40 secs to complete a cycle – Arun P Johny Mar 20 '14 at 09:15
Now the timing does not match the requirements... Hide after 10 seconds (not 30). This shows after 10 seconds then hides after 30. – iCollect.it Ltd Mar 20 '14 at 09:20
I have added an answer which includes *what you intended to do* with `setInterval` (assuming an initial show state was allowed), as well as a better alternative using the `timing` library. – iCollect.it Ltd Mar 20 '14 at 09:52

score 1 · Answer 3 · answered Mar 20 '14 at 09:14

1

Use setInterval(func, timeout) instead, it will run every timeout milliseconds and in the func toggle div between visible and hidden

answered Mar 20 '14 at 09:14

Banana

7,424
3
22
43

iCollect.it Ltd · Answer 4 · 2014-03-20T09:52:43.000

If you don't mind the initial state being "shown", you can do this (which is what Rohan Kumar probably intended):

setInterval(function() { 
    $("#myDiv").show(); 
    setTimeout(function() {     
       $("#myDiv").hide(); 
    },10000);
},40000);

The repeat timer is set to every 40 seconds (the total interval of 30+10) and the hide occurs after a fixed timeout of 10 seconds.

There is also a timing library that extends JQuery animation (to allow for repeats etc):

http://creativecouple.github.com/jquery-timing/

Then your code becomes something like:

$("#myDiv").repeat().wait(10000).show().wait(30000).hide();

JSFiddle: http://jsfiddle.net/TrueBlueAussie/zDV6F/1/

Which I think is pretty cool.

If you don't mind the extra calls, or don't want an extra libary, go with Arun P Johny's answer.

Hide/Show A Div After A Few Seconds

4 Answers4

http://creativecouple.github.com/jquery-timing/

JSFiddle: http://jsfiddle.net/TrueBlueAussie/zDV6F/1/