javascript - Chrome : JQuery animate; only appears to work when selected in developer tools

Question

我有一些样式化的页面需要开始工作。加载栏是页面的一部分。加载栏将在页面离开时出现(因为后端可能需要一些时间来响应)。加载栏出现后需要在访问者等待下一页时“加载”。

代码在 IE 中运行良好，但在 Chrome 和 Safari 中有一个奇怪的错误。加载栏“出现”后，当在 Chrome 的开发者工具中选择该元素时，它无法加载除外

在下面找到 HTML CSS 和 JS。在此先感谢您提供的任何帮助。

<span id="loading-footer">
  <p class="loading-bar-text">Loading:</p>
  <div id="loading-bar"><div id="coloured-bar" style=""></div></div>
</span>

/*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});
  });
}

Answer 1

当我这样做时，它在 Google Chrome 中运行良好:

$(document).ready(function() {
  $("#loading-footer").stop().show('fast', function() {
    $("#coloured-bar").stop().animate({
      width: "250",
    },{queue:false,duration:5000});
  });
})​

查看实际效果 here .

您可能不想将它绑定(bind)到 $(document).ready 事件，而是绑定(bind)到 $(window).unload 事件，如下所示:

$(window).unload(function() {
  $("#loading-footer").stop().show('fast', function() {
    $("#coloured-bar").stop().animate({
      width: "250",
    },{queue:false,duration:5000});
  });
})​