1

このサイトでは、サイトが開いているときにいくつかのものをフェード/アニメーション化したいと考えています: http://www.coaching-starnberg.de/neu

そうするために、私はこのスニペットを使用しています:

$(document).ready(function() {
$('img.start').each(function(index) {
if (index == 0) { index = 1; index+=1;}
$(this).animate({opacity: "0.0"}).delay(600*index).animate({opacity: "100.0"}, 9999);
index+=1;
});

要素の HTML 状態は可視に設定され、JavaScript によって非表示になります。ケースのすべてを表示したかったので、これを使用しました。ブラウザーで JavaScript が無効になっています。

JavaScript が要素を非表示にするまでの時間がかなり長いことに気付きました。つまり、すべてが一瞬で表示されてから、非表示になり、フェードインするのがわかります。

コンテンツが最初に表示されないように、このタイム ギャップを縮小するにはどうすればよいですか? `

君たちありがとう！

4

3 に答える 3

2

Stephan Muller の答えは解決策です。

しかし、私のニーズでは、CSS3キーフレームを使用する方が簡単であることがわかりました。

.element { animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}​
于 2013-10-01T19:03:01.773 に答える
1

そのために JavaScript を使用している限り、常に遅延が発生します。最初に CSS でコンテンツを非表示にする必要があります。これは、ロジックを $(document).ready に依存しているためです。これは、ブラウザーが最初に html、css、およびすべての javascript をロードしてから、js コードの実行を開始することを意味します。一般に、そのようなことは CSS で行う必要があります。

于 2013-09-29T13:20:26.537 に答える
1

問題は、デフォルトで要素を表示していて、ドキュメント全体が読み込まれてからのみ要素を非表示にする (そしてフェードを開始する) ことです。

代わりに、読み込まれるドキュメントに依存しない JavaScript を使用しないソリューションを使用する必要があります。一般的に使用される手法は、クラス「no-js」を<html>要素に追加し、<head>これを実行するスクリプトを起動することです。

document.getElementsByTagName('html')[0].className = "";

次に、CSS で、非表示にするすべての要素を設定し、それぞれに次を追加します。

.no-js [element] {
  visibility: visible;
}

<head>がブラウザによって解析され、javascript が有効になるとすぐに、「no-js」クラスが html 要素から削除されます。

于 2013-09-29T13:20:59.977 に答える