JQuery

[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>


결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic JQ - 제이쿼리 입문
basic JQ - 선행지식 / 포함요소
basic JQ - 시작 (= 버전 + 다운 + 설치 + 외부링크) (jQuery, down, CDN)
basic JQ - syntax ★ - 기본구문 (= 최적작동시점) + (즉시호출/즉시작동/즉시실행) 구문 (= IIF… 2
Selector JQ - selector ★★★★★ - 선택자 (= 제어할 요소선택) ※ this선택자 (=디스선택자)
Event JQ - event ★ - 이벤트 (= 메서드실행 촉발사건) ※ e 매개변수를 명시적으로 전달해야 하는 이유
Event JQ - $(document).ready() 메서드 ★ - 문서로드완료후 실행 (= ready메서드 = 다…
Event JQ - click() 메서드 ★ - click 이벤트발생/함수실행. (= click메서드 = 클릭 메서드…
Event JQ - dblclick() 메서드 ★ - dblclick 이벤트발생/함수실행. (= dblclick메서드 …
Event JQ - mouseenter() 메서드 ★★★ - mouseenter 이벤트발생/함수실행. (= mousee…
Event JQ - mouseleave() 메서드 ★ - mouseleave 이벤트발생/함수실행 (= mouseleav…
Event JQ - mousedown() 메서드 - mousedown 이벤트발생/함수실행. (= mousedown메서…
Event JQ - mouseup() 메서드 - mouseup 이벤트발생/함수실행. (= mouseup메서드 = 마우스…
Event JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)
1/20
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰 1
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인