jQuery: animate, stop, finish, delay

 

animate()

$("선택자").animate({
      속성:값,
      속성:값
  },시간,효과, 콜백함수);

 

* 콜백함수 : 앞의 애니메이션 효과가 끝난 뒤 처리할 문장

* 효과 : easing 효과를 선택하여 쓸 수 있는데, 효과가 이미 저장되어있는 ui jQurey를 다운 받아서 사용

- 효과 확인 : https://easings.net

- 다운로드 : https://jqueryui.com/ 

 

* animate 에서 background-color 사용을 위해서는 color.js가 필요

https://github.com/jquery/jquery-color 

jquery.color.plus-names-2.1.2.min.js 를 다운 받으면 영문색상이름에 헥사코드가 지정되어 있어 편리함

 

스크립트 연결 순서는 기본 제이쿼리, ui 제이쿼리, 컬러 제이쿼리 순.

<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.color.plus-names-2.1.2.min.js"></script>

    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $(".box").animate({
                    "width": "200px",
                    "height": "200px",
                    "opacity": 0.2,
                }, 1000)
            })

            $("button").eq(1).click(function() {
                $(".box").animate({
                    width: "50px",
                    height: "50px",
                    opacity: 1
                }, 1000)
            })

            $("button").eq(2).click(function() {
                $(".box").stop().animate({
                    width: "200px",
                    height: "200px",
                    "margin-left": "1000px",
                    "background-color": "pink"
                }, 1000, "easeOutElastic")
            })

            $("button").eq(3).click(function() {
                $(".box").animate({
                    marginLeft: 0
                }, 1000, function() {
                    $(".box").stop().animate({
                        width: "50px",
                        height: "50px",
                        backgroundColor: "darkturquoise"
                    }, 1000)
                })
        })
    </script>

 

 

stop()

모든 진행중인 명령어들을 일시정지

 

queue() : first in first out

dequeue() : 입구와 출구가 있는 병, 양쪽으로 출력 가능.

$(selector).stop();
$(selector).stop(clearQueue);
$(selector).stop(clearQueue, jumpToEnd);

 

clearQue

que에 쌓여있던 모든 명령어를 지움

 

jumpToEnd

정해둔 에니메이션의 최종형태로 바로 jump

 

boolean 값을 입력하고, default는 false

 

 

 

finish()

jumpToEnd와 같은 효과, 모든 명령어를 중단하고 최종 형태로.

 

delay(duration)

 

        $(function(){
            //start click-> div move to right end
            var xPos=$("body").width() - $("div").width();
            $("button:eq(0)").click(function(){
                $("div").animate({
                    marginLeft:xPos
                },3000)
            })
            
            //stop click-> box1 to stop
            $("button:eq(1)").click(function(){
              $(".box1").stop();  
            })
            
            $("button:eq(2)").click(function(){
                $(".box2").finish();
            })
            
            $("button:eq(3)").click(function(){
                $(".box3").delay(3000);
            })
        })

 

 

is.(":animated")

animate가 진행중인지 확인

$("선택자").is(":animated");

 

실습

        $(function(){
            function ani(){
            $(".box2").delay(2000).slideToggle(3000,ani);
            }
            ani();
            
            //button click-> box2 animated 상태이면 active 클래스 추가 제거 반복
            $("button").click(function(){
                $("div:animated").toggleClass("active");
            })
        })