jQuery에서 delay() 메서드 사용

Sheeraz Gul 2024년2월15일

jQuery 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>

위의 코드에서 색상 상자는 지정된 지연으로 페이드 인됩니다. 출력 참조:

jQuery 지연

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의 높이와 너비를 변경합니다. 출력 참조:

jQuery 지연 애니메이션

작가: Sheeraz Gul

Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.

LinkedIn Facebook

jQuery delay() 메서드

jQuery `delay()` 메서드