SeouliteLab

jQuery .delay() 메서드의 활용 예제와 설명 본문

프로그래밍

jQuery .delay() 메서드의 활용 예제와 설명

Seoulite Lab 2024. 4. 1. 08:35

jQuery의 .delay() 메서드는 특정 시간 동안 애니메이션을 지연시키는 데 사용됩니다. 이를 통해 애니메이션이나 다른 작업이 실행되기 전에 지정된 시간 동안 대기할 수 있습니다. .delay() 메서드의 사용법과 몇 가지 예제를 살펴보겠습니다.

예제 1: 애니메이션 지연

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .delay() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>

<div id="box"></div>

<script>
  $(document).ready(function() {
    $("#box").click(function() {
      $(this).fadeOut().delay(1000).fadeIn(); // fadeOut 후 1초 동안 대기한 후 fadeIn
    });
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소를 클릭할 때, fadeOut() 메서드로 요소를 투명하게 만든 후 1초 동안 지연시킨 후 fadeIn() 메서드로 다시 나타나게 합니다.

예제 2: 요소의 숨김과 나타남

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .delay() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>

<div id="box"></div>

<script>
  $(document).ready(function() {
    $("#box").click(function() {
      $(this).slideUp().delay(1000).slideDown(); // slideUp 후 1초 동안 대기한 후 slideDown
    });
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소를 클릭할 때, slideUp() 메서드로 요소를 숨기고 1초 동안 지연시킨 후 slideDown() 메서드로 다시 표시합니다.

예제 3: 다중 애니메이션 지연

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .delay() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: green;
      margin: 20px;
    }
  </style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

<script>
  $(document).ready(function() {
    $(".circle").each(function(index) {
      $(this).delay(500 * index).fadeOut(500).fadeIn(500); // 인덱스에 따라 지연 후 fadeOut 후 fadeIn
    });
  });
</script>

</body>
</html>

위 코드에서는 클래스가 "circle"인 요소들을 순회하면서 인덱스에 따라 애니메이션을 지연시킵니다. 이후 fadeOut() 메서드로 숨기고 fadeIn() 메서드로 다시 나타나게 합니다.

.delay() 메서드를 사용하면 애니메이션 효과를 지연시킬 수 있습니다. 메서드에 전달되는 매개변수는 밀리초 단위의 시간을 나타냅니다.

위 예제들에서는 다양한 애니메이션을 수행하고 그 후 .delay() 메서드를 사용하여 다음 애니메이션이 실행되기 전에 대기합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery .fadeOut() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .fadeIn() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .animate() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery Deferred.then() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery Deferred.resolveWith() 메서드의 활용 예제와 설명  (0) 2024.04.01
'프로그래밍' Related Articles more