SeouliteLab

jQuery에서 .dequeue() 메서드 활용하기 본문

프로그래밍

jQuery에서 .dequeue() 메서드 활용하기

Seoulite Lab 2024. 3. 30. 23:57

jQuery의 .dequeue() 메서드는 애니메이션 대기열을 관리하는 데 사용됩니다. 이 메서드를 사용하면 요소의 대기열에서 함수를 제거하여 애니메이션의 순서를 정확하게 제어할 수 있습니다. 다음은 이 메서드에 대한 설명과 예제를 제공합니다.

.dequeue() 메서드 이해하기

jQuery의 .dequeue() 메서드는 애니메이션 대기열에서 함수를 제거하여 다음 함수가 실행되도록 합니다. 이는 애니메이션의 실행을 수동으로 제어하거나 애니메이션의 순서를 관리할 때 유용합니다.

구문:

$(selector).dequeue(queueName);
  • selector: 요소를 선택하기 위한 선택자 표현식을 포함하는 문자열입니다.
  • queueName (선택 사항): 대기열의 이름을 나타내는 문자열입니다. 지정하지 않으면 기본 대기열이 사용됩니다.

이제 다양한 예제를 통해 이 메서드의 활용법을 알아보겠습니다.

예제:

예제 1: 기본 사용법

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .dequeue() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#start").click(function(){
        $("#box").animate({left: '250px'}, 2000);
        $("#box").animate({top: '250px'}, 2000);
      });
      $("#stop").click(function(){
        $("#box").dequeue();
      });
    });
  </script>
</head>
<body>

<button id="start">애니메이션 시작</button>
<button id="stop">애니메이션 중지</button>

<div id="box" style="width:100px;height:100px;background-color:red;position:absolute;"></div>

</body>
</html>

출력:

  • "애니메이션 시작" 버튼을 클릭하면 상자가 대각선 방향으로 이동합니다.
  • "애니메이션 중지" 버튼을 클릭하면 현재 애니메이션이 중단되고 상자가 현재 위치에서 정지합니다.

예제 2: 특정 대기열 제거

$("#box").animate({opacity: '0.5'}, 1000)
         .animate({opacity: '1'}, 1000)
         .dequeue("fx");

출력:

  • 투명도 애니메이션을 제거하고 기본 대기열에서 다음 애니메이션을 실행합니다.

예제 3: 수동 대기열 관리

$("#box").animate({width: '200px'}, 1000)
         .animate({height: '200px'}, 1000)
         .dequeue()
         .animate({opacity: '0.5'}, 1000)
         .animate({opacity: '1'}, 1000);

출력:

  • 너비와 높이 애니메이션이 순차적으로 실행되고, 그 후에 투명도 애니메이션이 실행됩니다.

.dequeue() 메서드를 사용하면 jQuery에서 애니메이션 대기열을 정밀하게 제어할 수 있습니다. 특정 함수 또는 전체 대기열을 제거하여 애니메이션의 흐름을 정확하게 관리할 수 있습니다.

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

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

jQuery의 .removeData() 메서드  (0) 2024.03.31
jQuery의 .queue() 메서드  (0) 2024.03.31
jQuery의 .data() 메서드의 힘을 발휘하다: 예제로 알아보는 설명  (0) 2024.03.30
jQuery의 .clearQueue() 메서드 활용하기  (0) 2024.03.30
jQuery.readyException() 메서드의 활용 예제와 설명  (0) 2024.03.30
'프로그래밍' Related Articles more