jquery - stop()/delay() - queue()/dequeue() - clearQueue() 메서드

* 애니메이션 효과 제어 메서드 종류 참고(https://simfairy.tistory.com/108)

 

 

*stop()/delay() 메서드

// 기본형

----------------------------------------------

1.
$("요소 선택").stop();

2.
$("요소 선택").stop(clearQueue, finish);

==============================================


1. 진행중(inprogress)인 첫 번째 애니메이션만 정지.
   큐에 대기 중인 애니메이션은 계속해서 실행함
   
  
2. clearQueue, finish는 true나 false의 값을 입력할 수 있다.(기본값 false)
   clearQueue가 true면 큐에서 대기 중인 애니메이션 모두 제거함.
   finish가 true면 진행 중인 애니메이션 강제 종료함.

 

*stop()을 좀더 자세히 알아보자 (2가지 예)

1. 진행중인 애니메이션만 정지시키는 경우

$(".txt1").animate({opacity:0.5}, 1000)
.animate({marginLeft:"500px"}, 1000);

$(".txt1").stop();

----------------------------------------

2. 대기중인 애니메이션은 제거하고 진행중인 애니메이션은 강제로 종료하는 경우

$(".txt2").animate({marginLeft:"500px"}, 1000)
.animate({opacity:0.5}, 1000);

$(".txt1").stop(true, true);

========================================


설명
1번은 stop() 인자값을 모두 생략한 경우 (진행중인 애니메이션만 정지)

첫 번째 animate의 opacity가 정지되고, 두 번째 marginLeft가 실행됨

----------------------------------------

2번은 stop()에 모든 인자값으로 true를 적용한 경우
(대기중인 애니메이션 제거, 진행중 애니메이션 강제 종료)

두 번째 animate의 opacity는 제거되고, 첫 번째 animate의 marginLeft는 적용되지만,
동작하는 모션은 종료된다. 위치만 바로 바뀜

 

 

*queue()/dequeue()

• queue()메서드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가함
• queue()메서드를 실행하면 실행 이후의 모든 애니메이션 취소.
• dequeue() 메서드는 queue()메서드 실행 이후에 적용된 애니메이션 메서드가 취소되지 않게 연결해줌.

// 기본형

1. 큐(Queue)의 함수 반환
$("요소 선택").queue();

2. 큐(Queue)에 함수 추가
$("요소 선택").queue( function() {자바스크립트 코드} );

3. dequeue() 메서드
$("요소 선택").dequeue();

 

 

*예제

-애니메이션 적용된 요소에 queue(function() {....})를 사용하여 새로운 함수를 큐에 추가하는 예제

이때는 dequeue() 메서드를 사용했기 때문에 queue() 이후 애니메이션이 취소되지 않음.

 

HTML

<p class="txt1">내용</p>

==================================

JQUERY

$(function(){
    $(".txt1")
    .animate({marginLeft:"200px"}, 1000)
    .animate({marginTop:"200px"}, 1000)
    .queue(function(){
        $(this).css({background:"red"});
        $(this).dequeue();
    })
    .animate({marginLeft:0}, 1000)
    .animate({marginTop:0}, 1000);
});

==================================


설명
----------------------------------

우선 위의 두 animate marginLeft, Top 이 1초에 걸쳐 실행됨.

----------------------------------

다음 queue() 함수를 써서 배경색 red를 반환한다.
이때 dequeue를 생략하면 배경색 red까지만 실행되고,
뒤쪽 animate 두개는 취소됨.

----------------------------------

위 코드에선 dequeue가 있으므로 queue가 실행되도
뒤에 오는 메서드가 취소되지 않게 연결해줌.

----------------------------------

그래서 뒤의 animate 두개가 순차적으로 실행.

 

-실행 결과 gif  - 더보기 클릭

 

 

 

 

*clearQueue() 메서드

- clearQueue() 메서드는  진행 중인(첫 번째) 애니메이션을 제외하고,

  큐에서 대기하는 모든 애니메이션 함수를 제거함.

 

HTML

<p class="txt1">내용1</p>
<p class="txt2">내용2</p>

===================================

JQUERY

$(function(){
    $(".txt1")
    .animate({marginLeft:"100px"}, 1000)
    .animate({marginLeft:"300px"}, 1000)
    .animate({marginLeft:"400px"}, 1000);

    $(".txt2")
    .animate({marginLeft:"100px"}, 1000)
    .animate({marginLeft:"300px"}, 1000)
    .animate({marginLeft:"400px"}, 1000);
    
    $(".txt2").clearQueue();
});


설명
clearQueue는 진행중인것 (첫 번째) 제외하고 큐에서 대기중인 모든 애니메이션 함수 제거함.

여기선 .txt2에 clearQueue()가 있으므로,
.txt2의 첫 번째 animate marginLeft 100px 는 실행되고
두번째 세번째의 marginLeft 300px 과 400px은 제거됨


결과
txt1의 내용1은 차례대로 실행됨
100px 가고 다시 300px 가고 400px 감


txt2의 내용1은 clearQueue()로 인해 처음것만 실행
100px만 가고 종료.

 

-실행 결과 gif  - 더보기 클릭