SeouliteLab

jQuery의 .clearQueue() 메서드 활용하기 본문

프로그래밍

jQuery의 .clearQueue() 메서드 활용하기

Seoulite Lab 2024. 3. 30. 23:42

jQuery에서 애니메이션 작업을 할 때 .clearQueue() 메서드는 매우 유용한 도구가 됩니다. 이 메서드를 사용하면 선택한 요소의 애니메이션 대기열을 지울 수 있어서 애니메이션 흐름을 동적으로 관리해야 하는 상황에서 중요한 역할을 합니다. 이 메서드에 대한 자세한 내용을 포괄적인 예제와 함께 살펴보겠습니다.

.clearQueue() 이해하기

jQuery의 .clearQueue() 메서드는 선택한 요소의 대기열에서 남아 있는 모든 함수를 제거하여 대기 중인 애니메이션을 중지시키는 데 사용됩니다. 이는 현재 진행 중인 애니메이션을 중지하거나 새로운 애니메이션을 시작하기 전에 애니메이션 대기열을 지우고 싶을 때 유용합니다.

구문:

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

이제 실용적인 예제를 통해 이 메서드의 기능을 더 잘 이해해 보겠습니다.

예제 1: 기본 사용법

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .clearQueue() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#시작").click(function(){
        $("#상자").animate({height: "200px"}, 2000);
        $("#상자").animate({width: "200px"}, 2000);
      });
      $("#중지").click(function(){
        $("#상자").clearQueue().stop();
      });
    });
  </script>
</head>
<body>

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

<div id="상자" style="width:100px;height:100px;background-color:red;margin-top:20px;"></div>

</body>
</html>

출력:

  • "애니메이션 시작"을 클릭하면 상자의 높이와 너비가 애니메이션됩니다.
  • "애니메이션 중지"를 클릭하면 현재 진행 중인 애니메이션을 즉시 중지하고 애니메이션 대기열이 지워집니다.

예제 2: 특정 대기열 지우기

$("#상자").animate({left: '250px'}, 2000);
$("#상자").animate({top: '250px'}, 2000);
$("#상자").animate({left: '0px'}, 2000);
$("#상자").clearQueue("fx");

출력:

  • 상자의 위치를 변경하는 애니메이션 대기열은 지워지고, 다른 애니메이션은 그대로 유지됩니다.

예제 3: 연결된 애니메이션

$("#상자").animate({opacity: '0.5'}, 1000)
         .animate({opacity: '1'}, 1000)
         .clearQueue();

출력:

  • 투명도 애니메이션 연쇄가 중단되고, 이후 애니메이션은 실행되지 않습니다.

jQuery의 .clearQueue() 메서드는 애니메이션 대기열을 정밀하게 제어하여 개발자가 애니메이션을 효과적으로 관리할 수 있도록 해줍니다. 현재 진행 중인 애니메이션을 중지하거나 특정 애니메이션 대기열을 지우는 등의 작업을 통해 웹 애플리케이션의 유연성과 반응성을 향상시킬 수 있습니다.

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

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

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