window.onload与Chrome

Question

一旦页面加载，尝试获得h1淡入。 在本地测试时，它适用于所有浏览器。 但是当托管时，使用Chrome，它并不总是淡入淡出。 有时它从一开始就完全可见。 我已经尝试了两种似乎在Safari和Firefox中都可以使用的方法，但无论是否有效，Chrome都是“不确定”。

Chrome只是从缓存中加载而不执行，还是有另一种编写此JavaScript的方法？

我试过了：

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

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

我试过了：

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

通过CSS将显示设置为none并放在document.ready wrap之外。

有什么建议么？ 或者为什么Chrome始终不能始终如一？

Answer 1

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

我建议你尝试只使用jQuery来改变类并将动画留给CSS。 虽然代码

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

看起来很好，所以也许尝试将它包装在你的

  window.onload = function () {
  }

声明？

Answer 2

为什么不简单地使用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;
}

例如： http ： //codepen.io/shperber/pen/XKzOLX