HOWTO · jQuery
jQuery에서 delay() 메서드 사용
이 튜토리얼은 jQuery에서 특정 항목의 실행을 지연시키기 위해 delay() 메소드를 사용하는 방법을 보여줍니다.
이 페이지의 내용
jQuery의 delay() 메소드는 다음 항목을 실행하기 위한 타이머를 설정합니다. 이 튜토리얼은 jQuery에서 delay() 메소드를 사용하는 방법을 보여줍니다.
jQuery delay() 메서드
delay()는 특정 항목의 실행을 지연시키는 데 사용되는 jQuery의 내장 함수입니다. 이 방법은 대기열에 있는 jQuery 효과 사이에 지연을 제공하기 위한 최선의 선택입니다.
이 메서드의 구문은 다음과 같습니다.
$(selector).delay(parameter1, parameter2);
어디에:
selector는 id, 클래스 또는 요소 이름이 될 수 있습니다.parameter1은 밀리초 단위, 느리거나 빠를 수 있는 지연 속도입니다.parameter2는 선택적으로 대기열 이름을 지정하는 데 사용됩니다. 기본값은 표준 효과 대기열인fx입니다.
jQuery에서 delay() 메소드의 효과를 보여주는 예제를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box1").delay("slow").fadeIn();
$("#box2").delay("fast").fadeIn();
$("#box3").delay(1000).fadeIn();
$("#box4").delay(2000).fadeIn();
$("#box5").delay(3000).fadeIn();
$("#box6").delay(4000).fadeIn();
});
});
</script>
</head>
<body>
<h1>jQuery delay() method.</h1>
<p>Click the button to show the delay effect. Color boxes will fade in on the click with a delay</p>
<button>Click Here</button>
<br><br>
<div id="box1" style="width : 50px; height : 50px; display : none; background-color : pink;"> slow </div> <br>
<div id="box2" style="width : 50px; height : 50px; display : none; background-color : green;"> fast </div> <br>
<div id="box3" style="width : 50px; height : 50px; display : none; background-color : blue;"> 1 second </div> <br>
<div id="box4" style="width : 50px; height : 50px; display : none; background-color : violet;"> 2 seconds </div> <br>
<div id="box5" style="width : 50px; height : 50px; display : none; background-color : yellow;"> 3 seconds </div> <br>
<div id="box6" style="width : 50px; height : 50px; display : none; background-color : purple;"> 4 seconds </div> <br>
</body>
</html>
위의 코드에서 색상 상자는 지정된 지연으로 페이드 인됩니다. 출력 참조:
delay() 메소드를 기반으로 div에 애니메이션을 적용하는 jQuery의 다른 예를 시도해 보겠습니다. 예를 참조하십시오.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("#DemoButton").click(function() {
$("#DemoDiv").delay("fast").animate({
width: "250px",
padding: "35px"
});
$("#DemoDiv").delay("slow").animate({
width: "350px",
padding: "55px"
});
$("#DemoDiv").delay(1000).animate({
width: "275px",
padding: "50px"
});
$("#DemoDiv").delay(2000).animate({
width: "500px",
padding: "60px"
});
$("#DemoDiv").delay(3000).animate({
width: "200px",
padding: "40px"
});
});
});
</script>
<style>
#DemoDiv {
background-color : lightblue;
width : 200px;
height : 100px;
font-size : 30px;
padding : 10px;
display : block;
}
</style>
</head>
<body>
<div id="DemoDiv">Hello, This is Delftstack.com</div>
<button id="DemoButton">Click Here</button>
</body>
</html>
위의 코드는 주어진 시간 지연에 따라 div의 높이와 너비를 변경합니다. 출력 참조:
