jQuery 입문 | 이펙트(effect) 효과 | 애니메이션 효과 .animate()

.animate() 메소드

jQuery에서는 .animate() 메소드를 이용하여 사용자 정의한 이펙트 효과를 정의할 수 있다.
.animate() 메소드는 여러 CSS 스타일 속성을 이용하여 새로운 이펙트 효과를 만들어 준다.

.animate() 메소드의 원형은 다음과 같다.

$(선택자).animate(스타일 [,지속시간] [,시간당속도함수] [,콜백 함수]);

• 스타일 : 필수이며, 이펙트 효과를 구성할 CSS 스타일 속성을 정의한다.
• 지속 시간 : 이펙트 효과가 지속될 시간을 전달한다.
• 시간당 속도 함수(easing function): 이펙트 효과의 시간당 속도를 전달한다.
• 콜백 함수: 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의한다.

아래 예제는 <div> 요소를 200x200px으로 크기를 변경하고, 투명도를 0.2로 변경을 1초간 진행한다. 완료된 이후에는 완료되었다는 텍스트를 표시한다.

$("div").animate({
    width: "200px",
    height: "200px",
    opacity: 0.5
},
1000,
function() {
    $("#text").text("애니메이션 효과 실행이 완료되었습니다.");
});

코드 실행

.animate() 메소드 - 사용할 수 있는 CSS 속성

.animate() 메소드는 색(color)에 관한 속성을 제외한 거의 모든 CSS 속성을 사용할 수 있다.

.css() 메소드에서는 하이픈(-)으로 연결된 CSS 속성 명과 camelCase 방식으로 바꾼 속성 명을 둘 다 사용할 수 있다. 하지만 .animate() 메소드에서는 camelCase 방식의 속성 명만 사용할 수 있다.

.animate() 메소드에서 사용할 수 있는 CSS 속성은 다음과 같다.

• backgroundPositionX
• backgroundPositionY
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width
• maxHeight
• maxWidth
• minHeight
• minWidth
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent

.animate() 메소드 - 미리 정의된 값

.animate() 메소드는 CSS 속성값으로 미리 정의된 다음 값을 사용할 수 있다.

• show : 요소를 표시한다.
• hide : 요소를 감춘다.
• toggle : 요소를 표시했다가 감췄다가 번갈아 가면서 실행한다. 즉, show와 hide를 번걸아 가면서 실행한다.

아래 예제는 width, height 속성값을 미리 정의된 “toggle"로 설정한다.

$("button").on("click", function(){
    $("div").animate({
        width: "toggle",
        height: "toggle",
    }, 1000);
});

코드 실행

.animate() 메소드 - 시간당 속도 함수

.animate() 메소드는 시간당 속도 함수(easing function)을 사용하여 이펙트 효과의 시간당 속도를 설정할 수 있다.

• swing : 시작 / 끝에서는 느리게 움직이지만 중간에서는 빨라진다.
• linear : 일정한 속도로 움직인다.

아래 예제는 swing과 linear의 차이를 볼 수 있는 예제이다.

$("#btnStart").on("click", function(){
  $(".bar").stop().animate({
    width: "400px"    // CSS width 프로퍼티의 값을 "400px"로 설정함.
  }, 2000, "linear"); // 시간당 속도 함수를 "linear"으로 설정함.
});
$("#btnEnd").on("click", function(){
  $(".bar").stop().animate({
    width: "1px"      // CSS width 프로퍼티의 값을 "1px"로 설정함
  }, 2000, "swing");  // 시간당 속도 함수를 "swing"으로 설정
});

코드 실행