0

ページの読み込み時に要素をイーズイン/フェードする最良の方法を探しています。

http://alpha.musicinfo.fi/で検索すると、コンテンツがスライド/フェードインするように表示されるのがとても気に入っています。

ブラウザとモバイルで非常にスムーズに機能しているため、どのようにそれを達成しているのか疑問に思っていました.

ありがとう!

4

3 に答える 3

1

最も単純なアニメーションには、 opera mobile 以外のすべてでサポートされているCSS3 トランジションを使用することをお勧めします。

transition: top 0.2s ease-in, opacity 0.2s ease-in
-webkit-transition: top 0.2s ease-in, opacity 0.2s ease-in
opacity: 0.0;
position: relative;
top: 20px;

そして、javascript または jQuery を使用して、ロード時に新しい状態を設定できます。

$('#element').css({opacity: 1.0, top: '0px'})

.animate()ただし、最大限の柔軟性と制御を得るには、jQuery の関数を使用することをお勧めします。次に、次のようなことができます $('#element').animate({ opacity: '1.0', top: '0px' }, 200)

デフォルトの CSS をopacity: 0; top: 20px; position: relative;

于 2013-08-16T15:53:16.850 に答える
0

addClassjQuery の関数を使用した別の方法を次に示します。

例はちょっと醜いですが、アイデアが得られれば。また、物事をスムーズにするために、CSS3 トランジションtransitionなどを使用します。

また、ボックスを折りたたむように変更する複数のクラスを追加します。これは単なる別の方法であり、最善ではないかもしれませんが、別の方法です。

これがフィドルです: http://jsfiddle.net/GrsXx/

于 2013-08-16T17:49:43.343 に答える