ユーザーがページに移動してから約 5 秒後にロゴを左上隅にフェードインさせるにはどうすればよいでしょうか?
これはhttp://jsfiddle.net/elroyz/sjD8X/で、隅にロゴがあります
body {
background-color:#000;}
コードなしでは投稿できないため、これを入れただけです
私はjqueryの遅延について何かを読みましたが、それについてほとんど何も知らないので、別のオプションがあるかもしれないと思いました
前もって感謝します
ユーザーがページに移動してから約 5 秒後にロゴを左上隅にフェードインさせるにはどうすればよいでしょうか?
これはhttp://jsfiddle.net/elroyz/sjD8X/で、隅にロゴがあります
body {
background-color:#000;}
コードなしでは投稿できないため、これを入れただけです
私はjqueryの遅延について何かを読みましたが、それについてほとんど何も知らないので、別のオプションがあるかもしれないと思いました
前もって感謝します
このトランジションを使用してみてください。
http://www.problogdesign.com/coding/get-started-with-css3-transitions-today/
幸運を!
$('img').delay(5000).fadeOut(250);
これにより、5 秒後に画像がフェードアウトします。コード内の時間はミリ秒です。
詳細については、こちらを参照してください
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;
}
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;}