[Do it!] 제이쿼리 효과 & 애니메이션

css만 사용했을 때 보다 좀 더 역동적이고 화려한 효과를 낼 수 있는 효과 메소드와 애니메이션 메소드에 대해 알아보자!

1. 효과 메소드

(1) 기본형

$("요소 선택").효과 메소드(효과 소요 시간, 가속도, 콜백 함수);

① 효과 소요 시간
☝🏻 "slow", "normal", "fast" 중 선택
✌🏻 직접 시간 입력 ex) 1000(1초)

② 가속도
☝🏻 "swing"(default값) : 시작과 끝은 느리고, 중간은 빠르게
✌🏻 "linear" : 일정한 속도로

③ 콜백함수
효과가 끝난 다음에 실행할 함수다. 물론, 생략 가능!

(2) fadeTo() 메소드 기본형

$("요소 선택").fadeTo(효과 소요 시간, 투명도, 콜백 함수);

투명도 → 0~1의 값. 1에 가까울 수록 선명함.

2. 애니메이션 메소드

(1) 기본형

$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백 함수);

(2) 예시

$(function(){
    $(".btn1").on("click", function(){
        $(".txt1").animate({
            marginLeft:"500px",
            fontSize:"30px"
        },
        2000,"linear", function(){
            alert("모션 완료!");
        });
    });

    $(".btn2").on("click", function(){
        $(".txt2").animate({
            marginLeft:"+=50px",
           
        },
        1000);
    });
});

3. 애니메이션 효과 제어 메소드

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

(1) 애니메이션 적용원리 & 큐의 개념

애니메이셔 메소드는 큐에 저장된다. 큐는 FIFO 형식으로 데이터를 처리한다는 점에 유의하자. 큐에 가장 먼저 들어간 애니메이션이 가장 먼저 실행된다는 뜻이다.

(2) 애니메이션 효과 제어 메소드 종류

stop()메소드는 진행중인 애니메이션만 정지시키고, 큐에 대기 중인 애니메이션은 계속 실행한다.

// 진행중인 애니메이션만 정지시키고, 큐에 대기 중인 애니메이션은 계속 실행한다.
$("요소 선택").stop();
//clearQueue가 true일 경우, 대기 중인 애니메이션 모두 제거, finish가 true일 경우, 진행중인 애니메이션 강제종료
$("요소 선택").stop(clearQueue, finish);

제이쿼리 비동기 방식 연동 부터는 마지막 글에 남기도록 하곘다!