[Effect] JQ - queue() 메서드 -실행 대기 함수 개수 표시. (= queue메서드 = 큐메서드)

1. queue() 예제 - span 요소의 queue 개수 표시.
2. queue() 정의
3. queue() 구문
4. queue() 예제 - queue 관련 메서드 함께 사용.
5. queue() 예제 - queue 개수 센 후, queue 반복.

queue() 예제 - span 요소의 queue 개수 표시.

 

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

<script>

$(document).ready(function(){

  $("button").click(function(){

    var div = $("div");

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

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

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

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

    $("span").text(div.queue().length);   

  });

});

</script>

  

<button>클릭</button>

<p> queue 개수: <span></span></p>

<div style="width:50px;height:50px;position:absolute;left:10px;top:100px;background-color:red;"></div>

 

결과보기

queue() 정의 

 

queue (큐): 실행을 기다리는 하나 이상의 함수 의미.

※ queue() 메서드는 아래 2가지 작업 수행 가능.

ⓘ queue의 모든 animation 함수 반환. (위 예제)

② queue에 실행할 함수 부착. (아래 예제)

 

---

 

1.

queue() 메서드 실행 시, 그 이후의 모든 animation이 취소됨.

 

2.

length 속성으로 queue 개수 반환 가능. (위 예제.)

 

3.

dequeue() 메서드와 함께 사용 가능.

dequeue() 메서드는 queue() 메서드 이후의 animation 취소를 막음. 

 

4.

요소에는 여러 queue가 있을 수 있음.

대개는, 기본 queue인 fx (= 표준 효과 대기열)만 존재.

 

queue() 구문

 

$(selector).queue(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>

 

결과보기

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

queue() 예제 - queue 개수 센 후, queue 반복.

 

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

<script>

$(document).ready(function(){

  $("button").click(function(){

    var div = $("div");

    startAnimation();

    showQueue();

    function startAnimation(){

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

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

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

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

    }

    function showQueue(){

      var q = div.queue();

      $("span").text(q.length);   

      setTimeout(showQueue);

    }

  });

});

</script>

  

<button>Start</button>

<p>queue 개수: <span></span></p>

<div style="width:50px;height:50px;position:absolute;left:10px;top:100px;background-color:red;"></div>

결과보기