jQuery animate() 메서드
예시
높이를 변경하여 요소 "애니메이션":
$("button").click(function(){
$("#box").animate({height: "300px"});
});
정의 및 사용
animate() 메서드는 CSS 속성 집합의 사용자 지정 애니메이션을 수행합니다.
이 메서드는 CSS 스타일을 사용하여 한 상태에서 다른 상태로 요소를 변경합니다. CSS 속성 값을 점진적으로 변경하여 애니메이션 효과를 만듭니다.
숫자 값만 애니메이션할 수 있습니다(예: "여백:30px"). "show", "hide" 및 "toggle" 문자열을 제외하고 문자열 값은 애니메이션(예: "background-color:red")할 수 없습니다. 이 값을 사용하면 애니메이션 요소를 숨기고 표시할 수 있습니다.
팁: 상대 애니메이션에는 "+=" 또는 "-="를 사용하세요.
통사론
(selector).animate({styles},speed,easing,callback)
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
| speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
| easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
| callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
대체 구문
(selector).animate({styles},{options})
| Parameter | Description |
|---|---|
| styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
| options | Optional. Specifies additional options for the animation. Possible values:
|
직접 해보십시오 - 예
animate() 사용 애니메이션을 반복하는 콜백 함수와 함께 animate()를 사용하는 방법.
대체 구문을 사용하여 여러 애니메이션 스타일 및 옵션을 지정합니다.
animate() 메서드를 사용하여 진행률 표시줄을 만드는 방법.
에 부드러운 스크롤 추가 animate()를 사용하여 링크에 부드러운 스크롤을 추가하는 방법.