Chrome:JQuery动画;仅当在开发人员工具中选择时才显示工作

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

本文关键字：工具 选择 工作 显示 开发 动画 JQuery Chrome      更新时间：2023-09-26

我有一些样式页面需要处理。加载栏是页面的一部分。加载栏将在页面导航离开时显示（因为后端可能需要一些时间才能做出响应）。出现后，加载栏需要"加载"，而访问者正在等待下一页。

该代码在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});
  });
}

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

$（document）.ready（function）{$（"#加载页脚"）.stop（）.show（'fast'，function（）{$（"#colored bar"）.stop（）.animate({宽度："250"，}，｛队列：false，持续时间：5000｝）；})；})​

请在此处查看它的实际操作。

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

$（window）.unload（function）{$（"#加载页脚"）.stop（）.show（'fast'，function（）{$（"#colored bar"）.stop（）.animate({宽度："250"，}，｛队列：false，持续时间：5000｝）；})；})​

右。。。我已经设法集中在问题/错误上，以下是我对它的描述：

正如在上面的代码中可能注意到的那样，我使用背景图像来表示加载栏中的"填充符"。当我用背景色替换这个背景图像时，加载就可以了！

我知道显而易见的论点。。。图片链接错误；但这不可能，因为当chrome开发的工具打开时，背景图像运行良好。当show()加载条的功能被删除时（只保留animate作为唯一功能），背景图像也工作良好。

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

所以为了解决这个问题，我将使用一种颜色来代替背景图像。。。无论如何，差别很小。

相关文章：