[Effect] JQ - dequeue() 메서드 - 실행 대기 함수를 계속 실행. (= dequeue메서드 = 디큐메서드)

1. dequeue() 예제 - queue에서 다음 함수 제거 후, 그 함수 실행.
2. dequeue() 정의
3. dequeue() 구문
4. dequeue() 예제 - queue 관련 메서드 함께 사용.

dequeue() 예제 - queue에서 다음 함수 제거 후, 그 함수 실행.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script> 

$(document).ready(function(){

  $("#start").click(function(){

    var div = $("div");  

    div.animate({height: 200}, "slow");

    div.animate({width: 200}, "slow");

    div.queue(function(){

      div.css("background-color", "red");  

      div.dequeue();

    });

    div.animate({height: 100}, "slow");

    div.animate({width: 100}, "slow");

  });

});

</script> 

<p><button id="start">Start</button></p>

<div style="background:pink;height:50px;width:50px;"></div>

 

결과보기

주의: 핑크색 코드 없으면, 클릭 시 바로 배경색이 빨간색으로 변함.

dequeue() 정의

※ queue (큐) : 실행 대기중인 하나 이상의 함수.

 

queue() 메서드 실행 시 그 이후의 animation이 모두 취소되는데,

dequeue() 메서드는 그 취소를 막아 animation 작동을 가능케 함.

즉, queue() 메서드 이후의 animation을 계속 실행하는 역할 함.

 

---

 

1.

queue() 메서드와 함께 사용.

 

2.

요소에는 여러 queue가 존재 가능.

대개는, 기본 Query 큐인 fx 큐만 존재.

 

3.

process를 지속하려면 queue() 메서드 추가 후,

dequeue() 메서드 호출되었는지 여부 확인 필요.

 

dequeue() 구문

 

$(selector).dequeue(queueName)

 

---

[매개변수]

 

queueName

선택. queue 이름 지정. (기본값: fx)

※ fx : 표준 효과 대기열. (= the standard effects queue)

 

queue() 예제 - queue 관련 메서드 함께 사용.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

<script> 

$(document).ready(function(){

  var div = $("div");

  $("#start").click(function(){

    div.animate({height: 200}, "slow");

    div.animate({width: 200}, "slow");

    div.queue(function () {

      div.css("background-color", "red");  

      div.dequeue();

    });

    div.animate({height: 100}, "slow");

    div.animate({width: 100}, "slow");

  });

  $("#stop").click(function(){

    div.clearQueue();

  });

});

</script> 

<button id="start">Start</button>

<button id="stop">Stop</button><br><br>

<div style="background:pink;height:100px;width:100px;position:relative"></div>

 

결과보기