SeouliteLab

jQuery의 .queue() 메서드 본문

프로그래밍

jQuery의 .queue() 메서드

Seoulite Lab 2024. 3. 31. 00:01

jQuery의 .queue() 메서드는 요소의 작업 대기열을 관리하는 데 사용됩니다. 이 메서드를 사용하면 요소에 대기열에 함수를 추가하고 실행할 수 있습니다. 이제 .queue() 메서드에 대해 자세히 알아보고 다양한 예제를 살펴보겠습니다.

.queue() 메서드 이해하기

.queue() 메서드는 요소에 대기열에 함수를 추가하거나 실행할 때 사용됩니다. 이 메서드를 사용하면 요소의 애니메이션 및 다른 작업이 순차적으로 실행될 수 있습니다.

구문:

$(selector).queue(queueName, function(next) {
  // 작업 내용
  next(); // 다음 작업으로 넘어감
});
  • selector: 요소를 선택하기 위한 선택자 표현식을 포함하는 문자열입니다.
  • queueName (선택 사항): 대기열의 이름을 나타내는 문자열입니다. 지정하지 않으면 기본 대기열이 사용됩니다.
  • next: 다음 작업으로 넘어가기 위한 함수입니다.

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

예제:

예제 1: 기본 사용법

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .queue() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#start").click(function(){
        $("#box").queue(function(next) {
          $(this).css("background-color", "blue");
          next();
        });
        $("#box").queue(function(next) {
          $(this).animate({left: '250px'}, "slow");
          next();
        });
      });
    });
  </script>
</head>
<body>

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

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

</body>
</html>

출력:

  • "애니메이션 시작" 버튼을 클릭하면 상자의 배경색이 파란색으로 변하고, 그 후에 상자가 왼쪽으로 이동합니다.

예제 2: 대기열 이름 지정

$("#box").queue("customQueue", function(next) {
  $(this).fadeOut(1000, next);
});
$("#box").queue("customQueue", function(next) {
  $(this).fadeIn(1000, next);
});
$("#box").dequeue("customQueue");

출력:

  • customQueue라는 대기열에 투명도 애니메이션을 추가하고, 이후에 해당 대기열을 실행하여 상자가 투명해지고 다시 나타납니다.

예제 3: 큐 비우기

$("#box").animate({left: '250px'}, "slow")
         .animate({top: '250px'}, "slow")
         .queue(function(next) {
            $(this).clearQueue();
            next();
         })
         .animate({opacity: '0.5'}, "slow");

출력:

  • 상자가 왼쪽으로 이동한 후에는 대기열이 비워지고, 투명도 애니메이션이 실행됩니다.

.queue() 메서드를 사용하면 요소의 작업을 순차적으로 실행할 수 있습니다. 각 작업은 대기열에 추가되어 순서대로 실행되며, 이를 통해 다양한 동작을 조절할 수 있습니다.

저작자표시 비영리 변경금지 (새창열림)

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

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