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

코드 실행

슬라이드(slide) 효과

jQuery에서의 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현한다. 이러한 슬라이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같다.

.slideUp() 메소드 - 슬라이드 업(slide up)

.slideUp() 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여준다.

아래 예제는 id가 "divBox1"인 요소를 올라가면서 사라지게 한다.

$("#divBox1").slideUp(); // 인스를 지정하지 않으면 400(0.4초) 동안 올라가면서 사라진다.

인수로 밀리초에 해당하는 숫자을 지정하여 슬라이드 효과의 속도를 조절할 수도 있다.

$("#divBox2").slideUp(500); // id가 "divBox2"인 요소를 0.5초 동안 올라가면서 사라지게 한다.

혹은 "slow", "fast" 등의 예약어를 지정하여 슬라이드 효과의 속도를 조절할 수도 있다.

$("#divBox3").slideUp("fast");   

코드 실행

.slideDown() 메소드 - 슬라이드 다운(slide down)

.slideDown() 메소드는 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여준다.

아래 예제는 id가 "divBox1"인 요소를 올라가면서 사라지게 한다.

$("#divBox1").slideDown(); // 인스를 지정하지 않으면 0.4초(400) 동안 내려오면서 나타나게 한다.

인수로 밀리초에 해당하는 숫자을 지정하여 슬라이드 효과의 속도를 조절할 수도 있다.

$("#divBox2").slideDown(500); // id가 "divBox2"인 요소를 0.5초 동안 내려오면서 나타나게 한다.

혹은 "slow", "fast" 등의 예약어를 지정하여 슬라이드 효과의 속도를 조절할 수도 있다.

$("#divBox3").slideDown("fast");   

코드 실행

.slideToggle() 메소드 - 슬라이드 토글

jQuery에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .slideToggle() 메소드를 사용할 수 있다.
선택한 요소가 현재 사라진 상태라면 .slideDown() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .slideUp() 메소드의 동작을 수행한다.

$("#divBox1").slideToggle(); 
$("#divBox2").slideToggle(500); // id가 "divBox2"인 요소를 0.5초 동안 올라가면서 사라지거나 내려오면서 나타나게 한다.
$("#divBox3").slideToggle("fast"); // id가 "divBox3"인 요소를 빠르게 올라가면서 사라지거나 내려오면서 나타나게 한다.

코드 실행

페이드(fade) 효과

jQuery에서 페이드(fade) 효과는 해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현한다. 이러한 페이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같다.

.fadeIn() .fadeOut() 메소드 - 표시 및 숨기기

.fadeOut() 메소드는 선택한 요소를 서서히 사라지게 하고, .fadeIn() 메소드는 서서히 나타나게 한다.

$("#btnFadeOut").on("click", function() {
    $("div").fadeOut();
});
$("#btnFadeIn").on("click", function() {
    $("div").fadeIn();
});

위 예제에서는 <div> 요소를 .fadeOut() 메소드로 사라지게 하고, .fadeIn() 메소드로 표시한다.

코드 실행

.hide() .show() 메소드 - 효과 속도 설정

인수로 밀리초(ms)로 설정하거나 "slow", "fast"와 같은 예약어를 전달하여, 이펙트 효과의 속도를 설정할 수도 있다.

$("#btnFadeOut").on("click", function() {
  $("div").fadeOut(1000);
});
$("#btnFadeIn").on("click", function() {
  $("div").fadeIn("fast");
});

위 예제에서는 .fadeOut(1000) 메소드와 .fadeIn("fast") 메소드에 효과의 속도를 설정하고 있다.

코드 실행

.fadeToggle() 메소드 - 페이드 효과의 토글

jQuery에서는 선택한 요소의 현재 표시 상태에 따라 다른 동작을 하는 .fadeToggle() 메소드를 사용할 수 있습니다
선택한 요소가 현재 사라진 상태라면 .fadeIn() 메소드의 동작을 수행하고, 나타나 있는 상태라면 .fadeOut() 메소드의 동작을 수행한다.

$("#btnFadeToggle").on("click", function() {
  $("div").fadeToggle();
});

위 예제에서는 id가 btnFadeToggle인 요소을 클릭하면 <div> 요소가 번갈아 가면서 표시가 되었다가 숨겨진다.

코드 실행

.fadeTo() 메소드 - 페이드 효과의 투명도 설정

.fadeTo() 메소드를 사용하면, 페이드 효과에서 사용하는 최종 opacity 속성값을 직접 설정할 수 있다.

$("button").on("click", function() {
  $("#first").fadeTo(1000, 0.2);
  $("#second").fadeTo(1000, 0.5);
  $("#third").fadeTo(1000, 0.8);
});

위 예제에서는 id가 "first", "second", "third"인 요소를 1초에 걸쳐 opacity 속성값을 각각 0.2, 0.5, 0.8로 변경한다.

코드 실행