jquery .animate()

.animate()를 사용한 사용자 지정 효과 jQuery를 사용하면

 

메서드를 통해 임의의 CSS 속성에 애니메이션을 적용할 수 있습니다.

 

이 .animate()메서드를 사용하면 설정된 값 또는 현재 값에 상대적인 값으로 애니메이션을 적용할 수 있습니다.

// Custom effects with .animate()
$( "div.funtimes" ).animate(
    {
        left: "+=50",
        opacity: 0.25
    },
 
    // Duration
    300,
 
    // Callback to invoke when the animation is finished
    function() {
        console.log( "done!" );
    }
);

참고: 색상 관련 속성은 .animate()기본적으로 jQuery를 사용하여 애니메이션을 적용할 수 없습니다.

 

 

color 플러그인을 포함하여 컬러 애니메이션을 쉽게 구현할 수 있습니다 . 이 책의 뒷부분에서 플러그인 사용에 대해 논의할 것입니다.

 

링크완화 정의: easing은 효과가 발생하는 방식을 설명합니다. 즉, 변화율이 일정하거나 애니메이션 지속 시간에 따라 달라집니다. jQuery에는 스윙과 선형의 두 가지 완화 방법만 포함되어 있습니다.

 

애니메이션에서 보다 자연스러운 전환을 원하는 경우 다양한 easing 플러그인을 사용할 수 있습니다. jQuery 1.4부터는 .animate()메서드를 사용할 때 속성별 완화를 수행할 수 있습니다.

// Per-property easing
$( "div.funtimes" ).animate({
    left: [ "+=50", "swing" ],
    opacity: [ 0.25, "linear" ]
}, 300 );