Javascript window.onload与Chrome

试图让h1在页面加载后淡入。在本地测试时，它可以在所有浏览器中工作。但是，当使用Chrome托管时，它并不总是淡入。有时它从一开始就完全可见。我尝试过两种方法，它们在Safari和Firefox中似乎都能工作，但Chrome是否能工作还是个“疑问”

Chrome只是从缓存加载，而没有执行，还是有其他方法来编写这个JavaScript

我试过：

$('.headerTopHeading, .headerSubHeading').animate({
    'opacity': '1'}, 1200);

包装在document.ready中，并从一开始就通过CSS将不透明度设置为零

我试过：

window.onload = function () {
    $('.headerTopHeading, .headerSubHeading').fadeIn('1200');
};

通过CSS将显示设置为“无”，并放置在document.ready wrap外部

---

有什么建议吗？或者为什么Chrome没有始终保持一致的行为？

您确定JS控制台中没有错误，有时会停止执行脚本吗

我建议您尝试使用jQuery来更改类，并将动画留给CSS。虽然代码

$('.headerTopHeading, .headerSubHeading').animate({
    'opacity': '1'}, 1200);

看起来不错，也许可以试着把它包在包里

  window.onload = function () {
  }

---

语句？

您确定JS控制台中没有错误导致脚本停止执行吗

我建议您尝试使用jQuery来更改类，并将动画留给CSS。虽然代码

$('.headerTopHeading, .headerSubHeading').animate({
    'opacity': '1'}, 1200);

看起来不错，也许可以试着把它包在包里

  window.onload = function () {
  }

---

语句？

为什么不简单地使用css动画来控制标题淡入？只需添加默认的不透明度属性：0，动画延迟为加载页面后您希望淡入多长时间

@keyframes fadein {
   0% {opacity:0;}
   100% {opacity: 1;}
}
@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity: 1;}
}
@keyframes fadein {
   0% {opacity:0;}
   100% {opacity: 1;}
}

.fade-title {
   opacity: 0;
   color: #5f5f5f;
   -webkit-animation:fadein ease-in 1;
   -moz-animation:fadein ease-in 1;
   animation:fadein ease-in 1;

   animation-delay: 2s;
   -webkit-animation-fill-mode:forwards; 
   -moz-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   -webkit-animation-duration:1s;
   -moz-animation-duration:1s;
   animation-duration:1s;
}

例如：

---

为什么不简单地使用css动画来控制标题淡入，只需添加默认的不透明度属性：0，动画延迟为加载页面后您希望淡入多长时间

@keyframes fadein {
   0% {opacity:0;}
   100% {opacity: 1;}
}
@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity: 1;}
}
@keyframes fadein {
   0% {opacity:0;}
   100% {opacity: 1;}
}

.fade-title {
   opacity: 0;
   color: #5f5f5f;
   -webkit-animation:fadein ease-in 1;
   -moz-animation:fadein ease-in 1;
   animation:fadein ease-in 1;

   animation-delay: 2s;
   -webkit-animation-fill-mode:forwards; 
   -moz-animation-fill-mode:forwards;
   animation-fill-mode:forwards;

   -webkit-animation-duration:1s;
   -moz-animation-duration:1s;
   animation-duration:1s;
}

例如：

---

没有错误。我甚至在“window.onload”里面放了一个“console.log”，它按预期的那样通过了。我确实在JQuery文档中发现，如果对象在缓存中，它显然有时会无法启动。没有错误。我甚至在“window.onload”里面放了一个“console.log”，它按预期的那样通过了。我确实在JQuery文档中发现，如果对象在缓存中，它显然有时会失败。我只是不喜欢在上面设置计时器。但是，等等，使用css关键帧方法会在页面加载后触发，还是在css文件加载后触发？我刚刚尝试了这种方法，虽然它确实像预期的那样淡入，但我仍然面临Chrome的相同问题，如果页面已缓存，它将不会淡入，而只是出现。这绝对是Chrome处理缓存对象的一种方式。将淡入动画移动到另一个类，然后在页面加载后添加：$（'.fade title'）。addClass（'fade-in'）我考虑过这种方法，它似乎是最好的防故障选项。我只是不喜欢在上面设置计时器。但是，等等，使用css关键帧方法会在页面加载后触发，还是在css文件加载后触发？我刚刚尝试了这种方法，虽然它确实像预期的那样淡入，但我仍然面临Chrome的相同问题，如果页面已缓存，它将不会淡入，而只是出现。这肯定是Chrome处理缓存对象的一种方式。将淡入动画移动到另一个类，然后在页面加载后添加：$（'.fade title'）。addClass（'fade-in'）怎么样