ホームページ > 記事 > ウェブフロントエンド > jqueryは何秒後に画像を非表示にするかを実装します
jqueryは何秒後に画像を非表示にするかを実装します
- 青灯夜游オリジナル
- 2022-04-20 17:33:011682ブラウズ
実装方法: 1. "$("img").lay(milliseconds).fadeOut()" ステートメントと late() を使用して遅延秒数を設定します; 2. "setTimeout(function()" を使用します) { $("img").hide(); }, ミリ秒値);" ステートメント、タイマーによって遅延されました。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
ページには、動的な効果を追加したり、数秒の遅延を使用して画像を非表示にしたり、指定した秒数表示した後に非表示にしたりする必要がある場合があります。ここでは、jQuery を使用して設定する方法を示します。指定した秒数 (5 秒) 経過すると、画像が非表示になります。
方法 1: .lay() メソッドを使用する
img 画像が 5 秒間表示された後に非表示になるように設定します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("img").delay(5000).fadeOut();
});
});
</script>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="jqueryは何秒後に画像を非表示にするかを実装します" >
<br><br>
<button>实现5秒后隐藏图片</button>
</body>
</html>
方法 2: setTimeout() メソッドを使用します。
setTimeout() を使用して、5 秒後に非表示にするタイマーを設定します。表示画像。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
setTimeout(function() { $("img").hide(); }, 5000);
});
});
</script>
</head>
<body>
<img src="img/1.jpg" style="max-width:90%" / alt="jqueryは何秒後に画像を非表示にするかを実装します" >
<br><br>
<button>实现5秒后隐藏图片</button>
</body>
</html>
[推奨学習: jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]
以上がjqueryは何秒後に画像を非表示にするかを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。