jquery로 5초만에 자동 숨기기를 구현하는 방법-프런트엔드 Q&A-php.cn

jquery로 5초만에 자동 숨기기를 구현하는 방법

青灯夜游

풀어 주다： 2022-05-16 15:02:30

원래의

1754명이 탐색했습니다.

두 가지 방법: 1. "setTimeout(function(){specified object.hide();},5000);" 타이머를 설정하여 지연 효과를 얻는 문입니다. 2. 코드 실행 시간을 지연시켜 효과를 얻으려면 "specified object.delay(5000).fadeOut();" 문을 사용하세요.

jquery로 5초만에 자동 숨기기를 구현하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, jquery1.10.2 버전, Dell G3 컴퓨터.

jquery는 5초 동안 자동 숨김을 구현합니다

1. setTimeout() 메소드를 사용하세요

5초 후에 function() 메소드를 설정하려면 setTimeout() 메소드를 사용하세요
In function() 메소드 내부에서 hide() 메소드를 사용하여 지정된 요소를 구현합니다.

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

로그인 후 복사

jquery로 5초만에 자동 숨기기를 구현하는 방법

설명:

setTimeout() 메서드는 지정된 밀리초 수 후에 함수나 계산된 표현식을 호출하는 데 사용됩니다.

setTimeout()은 코드를 한 번만 실행합니다. 여러 번 호출하려면 setInterval()을 사용하거나 코드 자체에서 setTimeout()을 다시 호출하도록 하세요.

2. Delay()를 사용하여 요소를 자동으로 숨기도록 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초만에 자동 숨기기를 구현하는 방법