All geek questions in one place

Why jquery show () does not work in the example

Please consider Plunk . The goal is to provide a very simple simulation of the loading mechanism.

I have a simple setup:

  <body>
    <div id="loading">
      <img src="http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif"/>
    </div>
    <div id="content">
      <h3>Content fully loaded.</h3>
    </div>
  </body>

Where is contenthiding through CSS:

body 
{
  width: 100%;
  height: 100%;
}

#loading {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

#content {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

Javascript is equally simple:

$(window).ready(function() 
{
  simulateLongLoad();
  $('#content').show();
});

function simulateLongLoad() 
{
  setTimeout(showContent, 2000);
}

function showContent() 
{
  $('#loading').hide();
  $('#content').show();
}

But for some reason .show()#content is not working. Any idea why?

PS: Something is probably very stupid, but I don’t see it.

+4
source share
4 answers

write in css display:none;and not visibility

Read more about the difference over here.

For clarification:

display: none , ( dom). .

: , : none, , . , .

+4

visibility: hidden display: none, JS onload , . :

http://plnkr.co/edit/MHbBjuCEVrIGpKarooLF

+3

jQuery (...) .css( "display" , "block" )

, css 'visibility'

+2

visibility:hidden display:none JS ( 2 ).

 $('#content').show();

css #content elemment display:block not visibility:visible. visibility:hidden,

$('#content').css('visibility','visible');
+2

Source: https://habr.com/ru/post/1623928/

More articles:


All Articles