사용자 정의 이펙트
.animate() 메소드
제이쿼리에서는 animate() 메소드를 이용하여 사용자가 직접 원하는 이펙트 효과를 정의할 수 있습니다.
.animate() 메소드는 여러 CSS 속성을 이용하여 새로운 이펙트 효과를 만들어 줍니다.
.animate() 메소드의 원형은 다음과 같습니다.
원형
$(선택자).animate(프로퍼티[,지속시간][,시간당속도함수][,콜백함수]);
프로퍼티 파라미터는 필수이며, 이펙트 효과를 구성할 CSS 속성을 정의합니다.
지속 시간은 이펙트 효과가 지속될 시간을 전달합니다.
시간당 속도 함수(easing function)는 이펙트 효과의 시간당 속도를 전달합니다.
콜백 함수는 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의합니다.
예제
$(function() {
$("#animateBtn").on("click", function() {
$("#divBox").animate( // id가 "divBox"인 요소를
{
left: "+=100", // 오른쪽으로 100픽셀 이동하고,
opacity: 0.2 // 투명도를 0.2로 변경함.
}, 500, function() { // 0.5초에 걸쳐서 이펙트 효과가 진행됨.
$("#text").html("사용자 정의 이펙트가 실행됐어요!");
}
);
});
});
.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 속성값으로 미리 정의된 다음 값을 사용할 수 있습니다.
1. show
2. hide
3. toggle
예제
$(function() {
$("#animateBtn").on("click", function() {
$("#divBox").animate({
height: "toggle" // CSS height 속성값을 미리 정의된 "toggle"로 설정함.
});
});
});
.animate() 메소드 - 시간당 속도 함수
.animate() 메소드는 시간당 속도 함수(easing function)을 사용하여 이펙트 효과의 시간당 속도를 설정할 수 있습니다.
예제
$(function() {
$("#divBox").mouseenter( function() {
$(this).stop().animate({
width: "300px" // CSS width 프로퍼티의 값을 "300px"로 설정함.
}, 1000, "linear"); // 시간당 속도 함수를 "linear"으로 설정함.
});
$("#divBox").mouseleave( function() {
$(this).stop().animate({
width: "50px" // CSS width 프로퍼티의 값을 "50px"로 설정함.
}, 1000, "swing"); // 시간당 속도 함수를 "swing"으로 설정함.
});
});
