javascript - ウェブサイトへのロゴのフェードの遅延？

Question

ユーザーがページに移動してから約 5 秒後にロゴを左上隅にフェードインさせるにはどうすればよいでしょうか?

これはhttp://jsfiddle.net/elroyz/sjD8X/で、隅にロゴがあります

body {
background-color:#000;}

コードなしでは投稿できないため、これを入れただけです

私はjqueryの遅延について何かを読みましたが、それについてほとんど何も知らないので、別のオプションがあるかもしれないと思いました

前もって感謝します

Answer 1

このトランジションを使用してみてください。

http://www.problogdesign.com/coding/get-started-with-css3-transitions-today/

幸運を！

Answer 2

$('img').delay(5000).fadeOut(250);

これにより、5 秒後に画像がフェードアウトします。コード内の時間はミリ秒です。

詳細については、こちらを参照してください

• api.jquery.com/delay/
• api.jquery.com/fadeout/
• api.jquery.com/fadein/

Answer 3

CSS3 アニメーション。(まだ新しく実験的なため、ベンダー プレフィックスを使用):

@-webkit-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadein {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#logo {
  -webkit-animation: fadein 5s infinite;
  -moz-animation:    fadein 5s infinite;
  -o-animation:      fadein 5s infinite;
  animation:         fadein 5s infinite;
}

Answer 4

HTML

<img onload="this.style.opacity='1';" src="image path" />

CSS

img {opacity:0;-moz-transition: opacity 2s;-webkit-transition: opacity 2s;-o-transition: opacity 2s;transition: opacity 2s;}