jquery - 애니메이션(animate)메서드

*애니메이션(animate)메서드

 

// 기본형

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


스타일 속성 - 애니메이션으로 적용할 스타일 속성.

적용 시간 - 동작에 반응하는데 소요되는 시간.

 

 

*예제

// HTML

<p><button class="btn1">버튼1</button></p>

<span class="txt1">"500px" 이동</span>

<p><button class="btn2">버튼2</button></p>

<span class="txt2">"500px" 이동</span>

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

// JQUERY


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

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


설명
btn1에는 
marginLeft 500px 왼쪽에서 마진을 줘서 글자가 오른쪽으로 이동함
fontSize 30px 글자가 이동하면서 크기도 커짐.
2000 - 2초에 걸쳐서 동작하고 동작이 끝나면 모션 완료라는 경고창이 뜸.


btn2에는 
marginLeft +=50px 로 누를때 마다
1000 - 1초에 걸쳐 50px씩 왼쪽에 마진이 생겨 글자가 오른쪽으로 이동함.