jQuery w3schools 한글판 강좌36 - jQuery Effects -Animation -jQuery animate() - 여러 특성을 조절하기

 

 

jQuery animate() - 여러 특성을 조절하기

여러특성이 동시에 움직일수 있다는것에 주목하십시오 :

 

Example

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

});  

 

모든 CSS 특성(properties)를 animate()메소드로 조절하는것이 가능합니까?

예, 대부분 그렇습니다! 그러나, 한가지 기억할 만한 중요한 것이 있습니다:  

모든 특성(property) 이름은  animate() 메소드와 함께 사용시에는 반드시 카멜케이스형식(camel-cased)이어야 합니다 : 즉, padding-left 이라고 적지 마시고 반드시 paddingLeft 로 적어야 하며, margin-right 이라고 적지 마시고, marginRight 이라고 적어야 합니다. 

 

또한, 색상 애니메이션은핵심  jQuery 라이브러리에 포함되어서는 안됩니다.

만일 색상에 애니메이션 효과를 주길 원한다면, jQuery.com. 로부터 Color Animations plugin 을 다운받아야 합니다.

 

역자주: 

카멜케이스형식(camel-cased) : 낙타등처럼 높낮이가 보이게 글쓰는 형식 - 두 단어가 합쳐진 단어를 적을때 두번째 단어의 시작은 대문자로 적으라는 뜻