애니메이션 효과 options 활용

animation 효과에서 options 매개변수 값은

show(), hide(), fadeIn()등 기본효과 메서드에 공통으로 사용할 수 있다.

 

options를 사용하면 기본 효과 메서드 호출 시 리터럴 객체를 이용해서 여러매개변수 값을 하나의매개변수로 묶어 호출 할 수 있다.

$대상.기본효과메서드(option)

 

적용전

$imgs.slideDown(3000, "easeInBounce", function(){
    alert("slideDown 완료");
})

 

적용후

$imgs.slideDown({
    easing:"easeInBounce",
    duration:3000,
    complete:function(){
        alert("slideDown 완료");
    }
})

이렇게 순서에 상관없이 사용가능하다.

 

이 외에 options에는 추가로 사용 가능한 다양한 옵션을 제공한다.

• iteration : 애니메이션을 반복할 횟수를 설정한다. 기본 값은 "1"이고 'infinite'를 설정하면 무한 반복이다.
• delay : 애니메이션 시작 전에 대기할 시간을 설정한다. 값은 초 단위이며, 기본 값은 0초이다.
• endDelay : 애니메이션 종료 후 대기할 시간을 설정한다. 값은 초 단위이며 기본값은 0초이다.
• derection : 애니메이션을 반복할 방향을 설정한다. 'nomal', 'reverse', 'alternate', 'alternate-reverse' 값을 사용할 수 있고 기본값은 'normal'이다.
• fill : 애니메이션이 시작되기 전과 끝나고 난 후의 요소 상태를 설정한다. 'none', 'forwards', 'backwards', 'both'값을 설정할 수 있고 기본값은 'none'
• playbackRade : 애니메이션 재생 속도를 설정할 수 있다. 기본값은 1이고, 0.5와 같이 작은 값을 설정하면 느리게, 큰값을 설정하면 빠르게 재생된다.
• easing : 애니메이션의 이징 함수를 설정한다.
• duration : 애니메이션 시간을 설정한다. 기본값은 400
• step : 애니메이션의 프레임이 진행될 때 호출되는 함수 현재 애니메이션 프레임에 적용된 스타일 속성값을 알아낼 때 주로 사용한다.
• complete : 애니메이션 완료 후 실행할 함수
• start : 애니메이션이 시작될때 호출되는 함수 시작전 애니메이션에 필요한 초깃값을 설정할 때 주로 사용하며 조건에 따라 애니메이션을 멈출 수도 있다.
• progress : step옵션과 동일하게 애니메이션의 프레임이 진행될 때 호출되는 함수이다. 애니메이션 진행률 및 남은 애니메이션 시간을 알 수 있다.
• done : complete옵션과 동일하게 애니메이션 완료 후 호출되는 함수이다.