.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"으로 설정
});

코드 실행

+ Recent posts