Chrome：JQuery 动画；仅在开发人员工具中选择时才有效答案

【问题标题】：Chrome: JQuery animate; only appears to work when selected in developer toolsChrome：JQuery 动画；仅在开发人员工具中选择时才有效
【发布时间】：2012-03-07 10:12:57
【问题描述】：

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

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

在下面找到 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});
  });
}

【问题讨论】：

您是否尝试将 window.onbeforeunload = function() { 替换为 $(function(){ ？

标签： javascript jquery css google-chrome webkit

【解决方案1】：

当我这样做时，它在谷歌浏览器中运行良好：

$(文档).ready(函数() { $("#loading-footer").stop().show('fast', function() { $("#coloured-bar").stop().animate({ 宽度：“250”， }，{队列：假，持续时间：5000}）； }); })

看到它在行动here。

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

$(窗口).unload(函数() { $("#loading-footer").stop().show('fast', function() { $("#coloured-bar").stop().animate({ 宽度：“250”， }，{队列：假，持续时间：5000}）； }); })

【讨论】：

感谢 Rian 的回复。我检查了您的链接，我认为我们可能有不同的结果...编辑：啊，别等了，不，它在您提供的链接中确实有效... Grrr，那么一定与整个文档有关，损坏的 div什么的......再次感谢Rian

【解决方案2】：

好吧...我已经设法集中解决问题/错误，这是我的描述：

在上面的代码中可能会注意到，我使用背景图像来表示加载栏中的“填充物”。当我用背景颜色替换此背景图像时，加载工作！

我知道明显的论点...图片链接错误；但它不可能，因为当 chrome 开发的工具打开时，背景图像工作正常。当show() 加载栏的功能被移除时，背景图像也可以正常工作（留下animate 作为唯一功能）

奇怪 - [也许不是，但我无法解释]

所以为了解决这个问题，我将使用颜色而不是背景图像......无论如何差异很小。

【讨论】：