애니메이션 효과 제어 메소드란?

  '효과' 또는 '애니메이션'이 적용된 요소의 동작을 제어하는 메소드이다.

 

애니메이션 적용 원리와 큐의 개념

  애니메이션 메소드는 함수가 적용된 순서대로 큐(queue)라는 저장소(memory)에 저장된다.

  큐는 ATM기기를 통해 은행 일을 보는 사람들을 생각하면 쉽다.

  사람들이 줄을 서있고 일을 먼저 마친 사람은 먼저 나온다.

  큐도 마찬가지로 큐에 저장된 애니메이션 대기열이 있다면 먼저 들어간 애니메이션이 먼저 실행된다.

 

  다음은 애니메이션을 적용한 요소의 동작을 제어하는 메소드를 정리한 표이다.

종류 설명
stop() 현재 실행중인 효과를 모두 정지 시킨다
delay() 지정한 시간만큼 지연했다가 애니메이션을 진행한다
queue() 큐에 사용자 정의 함수를 추가하거나 큐에 대기중인 함수를 배열에 담아 반환한다. 그리고 queue()메소드 이후의 애니메이션 효과 메소드는 모두 취소한다.
clearQueue() 큐에서 처음으로 진행하고 있는 애니메이션만 제외하고 대기중인 애니메이션은 모두 제거한다.
dequeue() queue()메소드를 이용하면 대기하고 있는 애니메이션 메소드는 제거된다. 하지만 dequeue()메소드를 이용하면 메소드가 제거되는 것을 막을 수 있다.
finish() 선택한 요소의 진행중인 애니메이션을 강제로 완료 시점으로 보낸 후 종료한다.

 

stop() / delay() 메소드

  stop() 메소드는 요소에 적용한 애니메이션을 정지시키고, delay() 메소드는 요소에 적용한 애니메이션을 지정한

  시간만큼 지연시킨다.

  다음은 stop()메소드의 기본형이다.

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

  1은 진행중(inprogress)인 첫 번째 애니메이션만 정지시킨다. 큐에 대기중인 애니메이션은 계속해서 실행한다.

  2는 clearQueue, finish는 true나 false의 값을 입력할 수 있다(기본값은 false).  clearQueue가 true면 큐에서

  대기중인 애니메이션을 모두 제거한다. finish가 true면 진행중인 애니메이션을 강제로 종료한다.

 

1. 진행중인 애니메이션만 정지시키는 경우
   $(".txt1").animate({opacity:0.5}, 1000)
   .animate({marginLeft:"500px"}, 1000};
   $(".txt1").stop();
   
2. 대기중인 애니메이션은 제거하고 진행중인 애니메이션은 강제로 종료하는 경우
   $(".txt2").animate({opacity:0.5}, 1000)
   .animate({marginLeft:"500px"}, 1000);
   $(".txt2").stop(true, true);

  stop() 메소드는 첫번째, 두번째 인자값(clearQueue, finish)에 따라 메소드 적용방식이 달라진다.

  모든 인자값을 생략한 stop()메소드는 진행중인 애니메이션만 정지시키낟.

  모든 인자값에 true를 적용하면 대기중인 애니메이션은 제거되고 진행중인 애니메이션은 강제로 종료된다.

  그래서 실제로는 애니메이션이 아닌 css메소드를 적용한 것 처럼 보인다.

 

  다음은 애니메이션 실행을 지연시키는 delay()의 기본형이다.

$("요소 선택").delay(지연시간).애니메이션 효과 메소드();

  애니메이션 함수 앞에 delay(3000)메소드를 적용하면 3초 후에 애니메이션이 적용된다.

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

  다음은 delay()메소드와 stop()메소드를 적용한 예제이다.

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"300px"}, 1000);

    $(".txt2").delay(3000) //3초후에 애니메이션이 적용
    .animate({marginLeft:"300px"}, 1000);

    $(".btn1").on("click", moveElement);

    function moveElement(){
      $(".txt3")
      .animate({marginLeft:"+=50px"}, 800);
      //[버튼1]을 누를때마다 class값이 "txt3"인 요소가
      //0.8초간 50px씩 이동한다.

      $(".txt4")
      .animate({marginLeft:"+=50px"}, 800);
      $(".txt4").stop();
      //stop()이 실행되면 [버튼1]을 눌러도 애니메이션이 동작하지 않는다.

      $(".txt5")
      .animate({marginLeft:"+=50px"}, 800);
      $(".txt5").stop(true, true);
      //stop(true, true)가 실행되면 [버튼1]을 눌러도 애니메이션이
      //바로 종료 시점응로 이동한다.
      //그래서 애니메이션 없이 css()메소드를 적용한 것 처럼
      //50px씩 이동한다.
    }
  });
</script>
<style>
  p{width:110px;text-align: center;}
  .txt1{background-color:aqua;}
  .txt2{background-color:pink;}
  .txt3{background-color:orange;}
  .txt4{background-color:green;}
  .txt5{background-color:gold;}
</style>
</head>
<body>
  <p class="txt1">효과1</p>
  <p class="txt2">효과2<br>delay(3000)</p>
  <p><button class="btn1">50px 전진</button></p>
  <p class="txt3">효과3</p>
  <p class="txt4">효과4<br>stop()</p>
  <p class="txt5">효과5<br>stop(true, true)</p>
</body>

queue() / dequeue() 메소드

  queue()메소드는 큐에 적용된 애니메이션 함수를 반환하거나 큐에 지정한 함수를 추가한다.

  queue()메소드를 실행하면 실행 이후의 모든 애니메이션이 취소된다.

  dequeue()메소드는 queue()메소드 실행 이후에 적용된 애니메이션 메소드가 취소되지 않게 연결해 준다.

 

  다음은 queue()메소드와 dequeue()메소드의 기본형이다.

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

 

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

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"200px"}, 1000)
    .animate({marginTop:"200px"}, 1000)
    .queue(function(){
      $(this).css({background:"red"});
      $(this).dequeue();
    })
    //queue()메소드를 실행하고 dequeue()메소드를 생략하면
    //queue()메소드 이후의 애니메이션이 적용되지 않는다.
    .animate({marginLeft:0},1000)
    .animate({marginTop:0}, 1000);
  });
</script>
<style>
  *{margin:0;}
  .txt1{
    width:500px;text-align:center;background-color:aqua;
  }
</style>
</head>
<body>
  <p class="txt1">내용1</p>
</body>

clearQueue()메소드

  진행중인(첫 번째) 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거한다.

  다음은 clearQueue()메소드의 기본형이다.

$("요소 선택").clearQueue();

  다음은 clearQueue()의 사용법을 보는 예제이다.

<script>
  $(function(){
    $(".txt1")
    .animate({marginLeft:"110px"}, 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()를 실행하면 현재 진행중인 애니메이션을 제외하고
    //대기중인 애니메이션은 모두 제거된다.
  });
</script>
<style>
  .txt1, .txt2{width:50px; text-align:center; background-color:aqua;}
  .txt2{background-color:orange;}
</style>
</head>
<body>
  <p class="txt1">내용1</p>
  <p class="txt2">내용2</p>
</body>

 

총 정리

  animate() 메소드를 사용하여 슬라이드 요소를 만드는 예제이다.

  [Go]버튼을 누르면 요소가 오른쪽으로 이동하고 반대로 [Back]버튼을 누르면 요소가 왼쪽으로 이동한다.

<script>
  $(function(){
    var txt1=$(".txt1");
    var count=1;
    $(".btnWrap button").on("click", function(){
      if(!txt1.is(":animated")){ //[내용1]이 애니메이션 중이면 동작하지 않는다.
        if($(this).hasClass("backBtn")){
          count--;
          if(count<1){
            count = 1;
            return false;
          }
          txt1.animate({marginLeft:"-=10%"}, 300);
          //class값이 "backBtn"인 경우에 동작
        }else{
          count++;
          if(count>10){
            count=10;
            return false;
          }
          txt1.animate({marginLeft:"+=10%"}, 300);
          //class값이 "backBtn"이 아닌경우에 동작.
        }
      }
    });
  });
</script>
<style>
  .txt1, .txt2{width:50px; text-align:center; background-color:aqua;}
  .txt2{background-color:orange;}
</style>
</head>
<body>
  <p class="btnWrap">
    <button class="backBtn">Back</button>
    <button class="goBtn">Go</button>
  </p>
  <div class="wrap">
    <p class="txt1">내용1</p>
  </div>
</body>

 

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery) 다른 js 파일의 함수 호출  (0) 2024.03.08
JQuery(비동기방식연동 Ajax)  (0) 2020.05.26
JQuery(효과 및 애니메이션 메소드)  (0) 2020.05.22
JQuery(그룹이벤트)  (0) 2020.05.22
JQuery(이벤트 객체)  (0) 2020.05.22

+ Recent posts

티스토리툴바