How to add delay to show a div with Javascript?

Question

I want to "show" the hidden div after 2-3 sec delay. Is it possible in the same javascript? Help me please.......

I've used the following code:

function ShowSecond() {
    var div2 = document.getElementById("div2");
    div2.className = "show";
    setTimeout(function () {
        div2.className = 'hide';
    }, 2000);
}

.show {
      -o-transition: opacity 3s;
      -moz-transition: opacity 3s;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
      opacity:1;
  }
  .hide {
      opacity:0;
  }

<!DOCTYPE html>
<html>
    
    <head>
        <style>
</style>
        <script>
            
        </script>
    </head>
    
    <body>
        <div id="div1" class="show">First Div
            <button onclick="ShowSecond()">clickMe</button>
        </div>
        <div id="div2" class="hide">Hidden Div</div>
    </body>

</html>

I want to "show" the hidden div after 2-3 sec delay

what is the problem? [Here](https://jsfiddle.net/vasi_32/hca1690x/) it is working fine — brk, Aug 03 '16 at 05:34
When i click on the button the hidden div shows quickly, but i need to show the hidden div on button click after 2-3 seconds.. — vishnu, Aug 03 '16 at 06:36
@Vishnu Which browser are you using? may be transitions aren't supported. Check my answer for a Javascript solution/workaround. :) — winner_joiner, Aug 03 '16 at 07:09
@Vishnu is your problem solved Already, or do you need some more help? — winner_joiner, Aug 30 '16 at 07:39
@winner - Actually its not solved, i just changed the design view. Thanks. — vishnu, Sep 02 '16 at 07:02

winner_joiner · Accepted Answer · 2022-08-24T14:28:20.947

If you want a transition you will have to use some kind of css transition_(or alot of javascript calls, if your browser doesn't support css-transitions)_.

Here a mini example, how to perform the transition with only javascript
Speed and duration for this typ of transition has to be done the the interval(here 250 ms) and the opacity step-size (here 0.1)
(With this settings the duration for showing the div is about 2.5 seconds, since 250ms * 10 = 2.5s

function startShowing(){
  var elementToHide = document.getElementById("show");
  elementToHide.style.opacity = 0;
  var intervalId = setInterval(function(){
    if(elementToHide.style.opacity >= 1)
    {
      clearInterval(intervalId);
    }else{
      elementToHide.style.opacity = parseFloat(elementToHide.style.opacity) + 0.1;
    }
  },250);
}

//startShowing();

.hide{
opacity:0;
}

<div class="hide" id="show"> show me </div>
<button onclick="startShowing()"> SHOW </button>

If you mean something else please specify your problem in more detail.

OLD Answer, probably not the intended solution

Just add a plus-sign and a space when setting the hide css class to the div

With other words change this div2.className = 'hide'; to this div2.className += ' hide'; . Like this both classes are set on the div but the opacity value is overriden by the last added class

function ShowSecond() {
    var div2 = document.getElementById("div2");
    div2.className = "show";
    setTimeout(function () {
        div2.className += ' hide';
    }, 2000);
    
}

.show {
      -o-transition: opacity 3s;
      -moz-transition: opacity 3s;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
      opacity:1;
  }
  .hide {
      opacity:0;
  }

<!DOCTYPE html>
<html>
    
    <head>
        <style>
</style>
        <script>
            
        </script>
    </head>
    
    <body>
        <div id="div1" class="show">First Div
            <button onclick="ShowSecond()">clickMe</button>
        </div>
        <div id="div2" class="hide">Hidden Div</div>
    </body>

</html>

Like this the transition of the show is still valid and only the opacity is overriden.

score 1 · Answer 2 · edited May 23 '17 at 12:33

1

/* 1. First you have to implementation on document ready function

Then delay function execution by (xxxx) ms

$(document).ready(function() { setTimeout(function() { //what ever you want yo delay }, xxxx); }); */

OR You will find the Answer here

edited May 23 '17 at 12:33

Community

1
1

answered Aug 03 '16 at 05:32

developerbh

180
10

Just updated the answer .. someone asked that before – developerbh Aug 03 '16 at 05:39
Is it the right method?------ function ShowSecond() { var div2 = document.getElementById("div2"); div2.className = "show"; setTimeout(function () { div2.className = 'hide'; }, 2000); //added the following function ShowSecond() { $(document).ready(function() { setTimeout(function() { 2 }, ShowSecond); }); } – vishnu Aug 03 '16 at 05:42

score 1 · Answer 3 · answered Aug 03 '16 at 05:32

1

use css property transition-delay: 3s; in show class

answered Aug 03 '16 at 05:32

nktkarnany

43
1
11

score 1 · Answer 4 · answered Aug 03 '16 at 05:38

1

Try out this:

function ShowSecond() {

    setTimeout(function () {
        document.getElementById("div2").style.visibility = "hidden";
    }, 2000);
}

answered Aug 03 '16 at 05:38

Meena

97
2

score 1 · Answer 5 · answered Aug 03 '16 at 05:45

1

Have you tried to create another function to call your function with your desired delay?

function ClickShowSecond(){
    setTimeout(ShowSecond, 2000);
}

answered Aug 03 '16 at 05:45

Luis Antonio Pestana

993
2
9
24

Is it provide in the same js? – vishnu Aug 03 '16 at 06:29
yes. It is. Put this function above your original function. – Luis Antonio Pestana Aug 03 '16 at 07:21

score 0 · Answer 6 · answered Aug 03 '16 at 05:32

Just add one more setTimeout and add delay accordingly.

function ShowSecond() {
    var div2 = document.getElementById("div2");
    div2.className = "show";
    setTimeout(function () {
        div2.className = 'hide';
    }, 2000);
    setTimeout(function () {
        div2.className = 'show';
    }, 5000);
}

.show {
      -o-transition: opacity 3s;
      -moz-transition: opacity 3s;
      -webkit-transition: opacity 3s;
      transition: opacity 3s;
      opacity:1;
  }
  .hide {
      opacity:0;
  }

<!DOCTYPE html>
<html>
    
    <head>
        <style>
</style>
        <script>
            
        </script>
    </head>
    
    <body>
        <div id="div1" class="show">First Div
            <button onclick="ShowSecond()">clickMe</button>
        </div>
        <div id="div2" class="hide">Hidden Div</div>
    </body>

</html>

score 0 · Answer 7 · answered Aug 03 '16 at 05:35

0

setTimeout(function () {
        div2.className = 'hide';
        setTimeout(showDiv,3000);
    }, 2000);

function showDiv(){
    var div2 = document.getElementById("div2");
    div2.className = 'show';
}

answered Aug 03 '16 at 05:35

Rohan Veer

1,374
14
21

score 0 · Answer 8 · answered Aug 03 '16 at 06:56

this works on me, you can put the function in button trigger or when the page is load

// set this SetTimeout to your event trigger or in document ready 

setTimeout(showsomething, 3000);

function showsomething() {
//make your div or element being show here
}

How to add delay to show a div with Javascript?

8 Answers8