title: Chrome: JQuery animate; only appears to work when selected in developer tools
body: <p>I have some styled pages I need to get working. A loading bar is a part of the pages. The loading bar is to appear when the page is navigated away from (as the back end can take some time to respond). After appearing the loading bar then needs to 'load' whilst the visitor is awaiting the next page.</p>
  
  <p>The code is working fine in IE, but has a strange bug in Chrome and Safari. After the loading bar 'appears', it fails to load <em>except</em> when the element is selected in Chrome's developer tools</p>
  
  <p>Find the HTML CSS and JS below. Thanks in advance for any help given.</p>
  
  <pre><code>&lt;span id="loading-footer"&gt;
    &lt;p class="loading-bar-text"&gt;Loading:&lt;/p&gt;
    &lt;div id="loading-bar"&gt;&lt;div id="coloured-bar" style=""&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/span&gt;
  
  /*loading bar*/
  #loading-footer { background-color: #444; height: 93px; margin-top: 27px; position:     absolute; width: 411px; display: none; border-radius: 4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
  #loading-footer .loading-bar-text { color: #CCCCCC; font-family: helvetica; font-weight: bold; margin: 10% 0 0 16%; width: 0; display: inline-block; }
  #loading-footer #loading-bar { background-color: #151515; display: inline-block; height: 10px; margin: 0 0 -2px 75px; width: 201px; border:2px solid #394040; border-radius: 7px; -moz-border-radius:7px; -webkit-border-radius:7px; overflow: hidden; }
  #coloured-bar { background: url('../images/loadingcolor.gif') left top; overflow: hidden; width: 1px; height: 10px; margin: 0 0 0 -5px; z-index: 200;}
  
  window.onbeforeunload = function() {
    $("#loading-footer").stop().show('fast', function() {
      $("#coloured-bar").stop().animate({
        width: "250",
      },{queue:false,duration:5000});
    });
  }
  </code></pre>