title: Why is jquery show() not working in example
body: <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>