Why is jquery show() not working in example
<p>Please consider this <a href="http://plnkr.co/edit/EqdPdjsnrhob3mTqeJAP?p=preview" rel="noreferrer">Plunk</a>. It's purpose is to provide a very simple simulation of a loading mechanism.</p>

<p>I have a simple set up:</p>

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

<p>Where <code>content</code> is hidden through CSS:</p>

<pre><code>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;
}
</code></pre>

<p>The Javascript is equally simple:</p>

<pre><code>$(window).ready(function() 
{
  simulateLongLoad();
  $('#content').show();
});

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

function showContent() 
{
  $('#loading').hide();
  $('#content').show();
}
</code></pre>

<p>But, for some reason the <code>.show()</code> of #content doesn't work. Any idea why?</p>

<p><em>PS: Likely something very stupid, but I don't see it.</em></p>