Chromeでwindow.onload

Question

ページが読み込まれたら、h1をフェードインしようとします。ローカルでテストするときは、すべてのブラウザで動作します。しかし、ホストされているときには、Chromeで必ずしもフェードインするとは限りません。場合によっては、最初から完全に見えるだけの場合もあります。私はSafariとFirefoxの両方で動作するように見える2つの方法を試しましたが、Chromeは動作するかどうかにかかわらず「iffy」です。

Chromeはキャッシュからロードするだけで、実行することなく、またはこのJavaScriptを作成する別の方法がありますか？

私が試してみた：

document.readyに包ま

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

を、そして最初からCSSを経由してゼロに不透明度を設定します。

そして、私が試してみた：

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

CSS経由なしに表示を設定し、document.readyラップの外側に配置。

提案がありますか？ Chromeがいつも一貫して動作しない理由ですか？

Answer 1

スクリプトが実行されなくなることがあるJSコンソールにエラーはありませんか？

jQueryを使用してクラスを変更し、アニメーションをCSSのままにすることをお勧めします。コード

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

は大丈夫に見えますが、ので、多分あなたの

window.onload = function() { 
    } 

文でそれをラップしてみてください？

単に単に不透明度のデフォルトのプロパティを追加でタイトルフェードを制御するために、CSSアニメーションを使用しない理由

Answer 2

：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