私のページを画像で開きたい場合、その画像を10秒後にフェードアウトします。どのような方法で私はそれを行うことができますか?私がCss3でそれをやり遂げる方法はありますか?あなたがid
をフェードアウト(またはJavaScriptからそれを参照するためにいくつかの方法を持っている)する要素を与えてくれたように、長い特定の時間が経過すると画像がぼやけます
2
A
答えて
6
:
window.setTimeout(
function(){
$('#pictureID').fadeOut('slow');
},10000);
イメージをスプラッシュ画面として使用しているとしますか?その場合は、position: absolute
を使用してそのイメージをページのコンテンツに配置し、次にフェードアウトして下のコンテンツ(JS Fiddle demo)を表示することができます。
、しかし、あなたはまた、ユーザが(しかし、改正のカップルと、上記の)その後、以下を使用することができる場所でそれを保持するために、画像の上hover
にできるようにしたい場合:
var fadeAnim = window.setTimeout(
function(){
$('#i').fadeOut('slow');
},10000);
$('#i').hover(
function(){
window.clearTimeout(fadeAnim);
},
function(){
$(this).fadeOut(500);
});
参考文献:
- のJavaScript(Mozilla Developer Network's JavaScript resourceから):
- (jQuery APIから)のjQuery:
4
setTimeout(function() {
$('.imgClass').fadeOut('slow')
}, 10000);
1
あなたはそれを行うにはJavascriptを使用する必要があります。 CSS3でJavascript(jQuery)をクロスすることはできますが、クロスブラウザの問題ではフルjqueryで行うのがよいでしょう。これを行うには、load()、delay()、およびfadeOut()を使用できます。
試してみてください。
$('#yourImg').ready(function(){
$(this).delay(10000).fadeOut();
});
1
あなたはフェードの開始を遅らせるためにsetTimeout()
を使用することができ、その後、あなたは(などMooToolsのようや他のJavaScriptライブラリ)jqueryのいずれかを使用して、それをフェードアウトすることができたり、クラスを追加することができますcss3トランジションを使用して遷移させます。 jQueryのバージョンはすでに公開されているので、私はcss3のバージョンを投稿します。 http://jsfiddle.net/Tentonaxe/3Vnt7/
CSS:
#demo {
transition: opacity 2s ease-in;
-moz-transition:opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-webkit-transition: opacity 2s ease-in;
border: 4px solid green;
background-color: #ededed;
width: 75px;
height: 75px;
}
.hidden {
opacity: 0.0;
}
HTML:
<div id="demo"></div>
Javascriptを:
setTimeout(function(){
document.getElementById('demo').className = "hidden";
},10000);
関連する問題
- 1. .svg Chromeの特定のズームレベルで画像がぼやける
- 2. タブレットで画像がぼやける
- 3. リンク上にマウスオーバーすると画像がぼやけます
- 4. ポップでスワイプすると画像がぼやけます
- 5. ズームイン時に画像がぼやけている
- 6. 特定の時間が経過した後に画像を非表示にする
- 7. iphone 4モバイルサファリの画像がぼやけています
- 8. 大きな画像がフィードダイアログでぼやけます
- 9. JavaScriptかjQueryで画像がぼやけていますか?
- 10. アンドロイドでクロップされた画像がぼやけています
- 11. firefox svgグレースケールの問題 - 画像がぼやけてシフトする
- 12. Impress.js:テキストと画像がぼやけて見える
- 13. JXLを通じてExcelに追加すると画像がぼやけます
- 14. Androidで特定の時間が経過した後にアニメーションを表示する
- 15. 画像がぼやけてしまったCSS 3
- 16. 経過時間
- 17. ホバリング時に画像が飛び跳ねてちらつき、画像がぼやけている
- 18. ぼやけ画像iphone jquery mobile
- 19. Zebraプリンタ:印刷された画像がぼやける
- 20. モバイルSafari - 記事、テキスト、画像がiPhoneでぼやけている
- 21. MediaStoreサムネイル画像がぼやけて見える
- 22. UIImageViewで画像がぼやけて表示される
- 23. 圧縮画像がぼやけて見える
- 24. ACTION_IMAGE_CAPTUREを使用するとプレビュー画像がぼやける理由
- 25. ImageView AndroidでSdcardから表示すると画像がぼやける
- 26. 時間経過とタイムゾーン
- 27. 画像がぼんやりしない
- 28. Google Maps APIバージョン3により、画像がぼやけている/ぼやけている
- 29. jqueryで特定の時間が経過すると自動的にアイテムをslideUpにする方法
- 30. HTML5 Canvas:図形も画像もぼやけますか?
のページのマークアップとは何ですか?何を試したの? –