[jQuery] 애니메이션 효과 - .animate() 함수

 

자바스크립트의 제이쿼리(jQuery)에서 애니메이션 효과를 사용할 수 있는 함수로 .animate() 함수가 있습니다. .animate() 함수는 여러 CSS 스타일 속성을 이용하여 새로운 애니메이션 효과를 만들 수 있습니다.

 

jquery(제이쿼리)의 .animate() 함수

jQuery(제이쿼리)의 .animate() 함수는 수치 CSS 속성을 제어하여 움직이는 애니메이션 효과를 만들어 냅니다. 반드시 CSS 속성 MAP 데이터를 필요로 하며, 이 데이터 MAP은 .css() 함수에 인자로 사용하는 데이터 맵과 유사합니다.

//.animate() 함수 사용법

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

 

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

 

jQuery(제이쿼리)의 .animate() 함수는 미리 정의된 데이터를 사용할 수 있는데 show, hide, toggle 등으로 요소를 표시하거나 감추는 값을 사용할 수 있으며 또한 시간당 속도를 설정하는 swing, linear 등이 있습니다.