隐藏一个div并显示另一个？

Question

I have two divs on called #loading and one called #main ;

<div id="loading"></div>
<div id="main"></div>

What I'm trying to achieve is with using javascript, show #loading for five seconds then after the five seconds hide the #loading div and show the #main div. The #main div is default hidden and once the #loading div is hidden the #main div shows.

I'm assuming that to achieve this would be a mixture of css and javascript; hopefully you understand what I'm trying to achieve and can help me accomplish what I'm trying to achieve.

Thankyou.

Answer 1

Your css would be:

#main {
    display:none;
}

The JS would be:

setTimeout(function() {
    document.getElementById('main').style.display = 'block';
    document.getElementById('loading').style.display = 'none';
}, 5000);

Answer 2

Maybe this could help you out without the use of CSS. Only pure Jquery.

 $("#loading").show(); $("#main").hide(); setTimeout(function() { $("#loading").hide(); $("#main").show() }, 5000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="loading">loading here..</div> <div id="main" class="hidden">This is main content</div> 

Answer 3

Use setTimeout.

 window.onload = function() { setTimeout(function() { document.getElementById("loading").style.display = "none"; document.getElementById("main").style.display = "block"; }, 5*1000); } 

 #main { display: none; } 

 <div id="loading">loading</div> <div id="main">main</div> 

Hope this helps

Answer 4

function loading(dur) {
  if (window.busy) {return;}
  document.getElementById('loading').style.display = "block";
  document.getElementById('main').style.display = "none";
  window.busy = setTimeout(function () {
    document.getElementById('loading').style.display = "none";
    document.getElementById('main').style.display = "block";
    window.busy = 0;
  }, dur);
}

loading(5000);

Answer 5

Personaly I would avoid using ID's here as they polute the global.

You can do this nicely with CSS and classes..

 var holder = document.querySelector('.holder'); setTimeout(function () { holder.classList.remove('isloading'); }, 5000); 

 .loading { display: none; } div.isloading .loading { display: block; } .main { display: none; } div:not(.isloading) .main { display: block; } 

 <div class="holder isloading"> <div class="loading">Loading</div> <div class="main">Main</div> </div>