Question

一旦页面加载，尝试获取h1到淡入。在本地测试时，它适用于所有浏览器。但是，当托管Chrome时，它并不总是淡入淡出。有时它从一开始就完全可见。我尝试了两种方法，它们似乎都可以在Safari和Firefox中使用，但Chrome是一个＆＃34; iffy＆＃34;是否有效。

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

window.onload with Chrome

2 个答案: