Chapter 09. 애니메이션 효과 다루기. Lesson 03. 사용자 정의 애니메이션 효과

Chapter 09. 애니메이션 효과 다루기. 

Lesson 03. 사용자 정의 애니메이션 효과

02. 핵심 내용

핵심 01: 사용자 정의 애니메이션 효과 만들기

핵심 02: 애니메이션 효과 멈추기

핵심 01. 사용자 정의 애니메이션 효과 만들기

사용법 :

$대상.animate(properties, options)

$대상.animate(properties [duration] [easing] [complete])

* 매개변수

properties 

애니메이션을 적용할 CSS 스타일 프로퍼티와 값이 담길 객체입니다.

duration

효과가 지속될 시간 값(duration)입니다.

단위는 밀리초이며 기본값은 400ms입니다. 문자열 (slow, nomal, fast)도 사용합니다

easing

사용할 이징(easing) 함수 이름입니다. 이징 함수는 움직임을 구현한 함수입니다

complete

효과가 완료됐을 때 호출할 콜백 함수입니다.

options

duration, easing, complete 매개변수를 하나의 객체로 묶어 간결하게 매개변수를 전달할 수 있습니다.

또한 기본적인 매개변수 값 이외에 좀더 다양한 값을 설정할 때 사용합니다.

예제 01. animate()를 활용해 페이드 인/아웃 효과 만들기

풀이 전 코드는 앞에서 다룬 페이드 인/아웃 예제입니다. fadeIn()/fadeOut() 메서드 부분을 animate() 메서드를 이용해 페이드 인/아웃 효과를 만들어 주세요

<script>
$(document).ready(function() 
{
    //  움직일 대상 찾기.
    var $img1 = $("#target");
 
    // 사라지는 효과 
    $("#hide").on("click", function()
    {
        $img1.fadeOut(6000, "easeOutQuint", function()
        {
            alert("fadeOut 완료");
        });
    });
 
    // 나타나는 효과
    $("#show").on("click", function()
    {
        $img1.fadeIn(6000, "easeInQuint", function()
        {
            alert("fadeIn 완료");
        });
    });
});
</script>