[jQuery]애니메이션

jQuery를 사용해서 애니메이션 효과를 주도록 하겠습니다.

 

 

animate() 메서드

 

사용자 정의 애니메이션을 만드는데 사용됩니다.

 

$(selector).animate({params},speed,callback);

 

params 매개변수는 애니메이션화 할 css속성을 정의합니다.

 

speed는 효과의 지속시간을 지정합니다. 밀리초의 값을 사용합니다.

 

callback 매개변수는 애니메이션이 완료된 후에 실행되는 함수입니다.

 

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 

직접해보기

 

 

 

 

 

 

여러 속성 조작!

 

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}); 

직접해보기

 

 

 

 

 

속성의 애니메이션 값을 'show','hide' 또는 'toggle'로 지정할 수도 있습니다.

 

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
}); 

직접해보기

 

 

 

 

 

대기열 기능 사용

 

기본적으로 jQuery는 애니메이션 큐 기능을 제공합니다.

 

즉 "내부"대기열을 작성하기 때문에 순서대로 애니메이션이 실행됩니다.

 

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

직접해보기

 

 

출처:https://www.w3schools.com/jquery