ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryを使って5秒で自動非表示を実装する方法

jqueryを使って5秒で自動非表示を実装する方法

青灯夜游
青灯夜游オリジナル
2022-05-16 15:01:341707ブラウズ

2 つの方法: 1. 「setTimeout(function(){specified object.hide();},5000);」ステートメントは、タイマーを設定することで遅延効果を実現します。 2. コードの実行時間を遅らせることで効果を実現するには、「specified object.lay(5000).fadeOut();」ステートメントを使用します。

jqueryを使って5秒で自動非表示を実装する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

#jquery は 5 秒間の自動非表示を実装します

1. setTimeout() メソッドを使用します

  • setTimeout() メソッドを使用して、function() メソッドが 5 秒後に実行されるように設定します。

  • function() メソッドで、hide() メソッドを使用します。指定された要素を実装するメソッド。

  • $(document).ready(function() {
    	$("button").click(function() {
    		setTimeout(function() {
    			$("div").hide(); 
    		}, 5000);
    	});
    });

jqueryを使って5秒で自動非表示を実装する方法

説明:


setTimeout() メソッドは、関数を呼び出したり、実行後の式を計算したりするために使用されます。指定されたミリ秒数のモード。

setTimeout() はコードを 1 回だけ実行します。複数回呼び出す場合は、setInterval() を使用するか、コード自体で setTimeout() を再度呼び出すようにします。

2. 要素を自動的に非表示にするために、lay() を使用して 5 秒を設定します。

Delay() メソッドは、次の項目の実行までの遅延を設定します。列。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			.block {
			  width: 200px;
			  height: 200px;
			  background: brown;
			  cursor: pointer;
			  transition: 0.8s;
			}
		</style>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("div").delay(5000).fadeOut();
				});
			});
		</script>
	</head>
	<body>
		<div class="block"></div><br>
		<button>5秒隐藏div元素</button>
	</body>
</html>

jqueryを使って5秒で自動非表示を実装する方法

[推奨学習:

jQuery ビデオ チュートリアル Web フロントエンド ビデオ ]

以上がjqueryを使って5秒で自動非表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。