English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
animate() 메서드는 그룹 CSS 속성에 대한 사용자 정의 애니메이션을 수행합니다。
애니메이션은 하나의 CSS 스타일 설정에서 다른 CSS 스타일 설정으로의 전환 애니메이션을 가능하게 합니다。
모든 애니메이션 속성은 단일 숫자로 설정되어야 합니다(예: 너비, 높이 또는 왼쪽 값).
문자열 "show", "hide", "toggle" 외에 문자열 값은 애니메이션을 설정할 수 없습니다(예: 배경색). 이 값은 애니메이션 요소를 숨기거나 표시할 수 있습니다。
애니메이션 속성도 상대적일 수 있습니다. 값에 접두어가 제공되면+= 또는-= 문자열 시퀀스, 그렇다면 속성의 현재 값을 기준으로 주어진 숫자를 추가하거나 뺄 수 있습니다.
스타일 속성 외에도 일부 비스타일 속성(예: scrollTop과 scrollLeft)에 대한 애니메이션을 처리할 수 있습니다。
$(selector).animate({styles}, duration, easing, callback)$(selector).animate({styles}, {options})요소의 너비를 변경하여 요소의 애니메이션을 설정합니다：
$("#btn1").click(function(){
$("div").animate({width: "500px");
});테스트를 보세요‹/›요소의 너비와 높이를 변경하여 애니메이션 효과를 부여합니다：
$("#btn1").click(function(){
$("div").animate({width: "500px");
$("div").animate({height: "400px");
});테스트를 보세요‹/›여러 스타일 속성과 값을 전달하여 요소에 애니메이션을 적용합니다：
$("#btn1").click(function(){
$("div").animate({
width:"500px",
height:"400px"
});
});테스트를 보세요‹/›animate()를 사용하여의duration과 easing의매개변수：
$("button").click(function(){
$("div").animate({width:"500px", height:"400px"}, 4000, "linear");
});테스트를 보세요‹/›animate()와 콜백 함수를 함께 사용합니다：
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
}, 500, "linear",
function(){
$(this).after("<h2>애니메이션 완료</h2">
});
});테스트를 보세요‹/›사용 대체 문법을 통해 여러 애니메이션 {styles}와 {options}를 지정합니다：
$("button").click(function(){
$("div").animate({
width:"500px",
height:"400px"
duration:500,
easing:"linear",
complete:function(){
$(this).after("<h2>애니메이션 완료</h2">
}
});
});테스트를 보세요‹/›사용자가 페이지를 스크롤할 때 원활한 스크롤을 추가합니다：
let size = $(".main").height(); // .main" 높이를 가져옵니다
$(window).keydown(function(event) {
if(event.which === 40) { // else if(event.which ===
$("html, body").animate({scrollTop: "+=" + size}, 300);
} 38) { // 위쪽 방향키를 누를 때
$("html, body").animate({scrollTop: "-=" + size}, 300);
}
});테스트를 보세요‹/›모든 단락에 대한 애니메이션을 상대적 값으로 설정합니다：
$("p").click(function(){
$(this).animate({
fontSize: "+=5px",
padding : "+=10px"
});
});테스트를 보세요‹/›또한, 우리는 속성의 애니메이션 값을 "show", "hide", 또는 "toggle"로 지정할 수 있습니다：
$("button").click(function(){
$("div").animate({height: "toggle"});
});테스트를 보세요‹/›$(selector).animate({styles}, duration, easing, callback)| 파라미터 | 설명 |
|---|---|
| styles | 필수. 애니메이션 효과를 생성하는 하나나 여러 개의 CSS 속성을 지정/값. 주의:animate() 메서드와 함께 사용할 때, 속성 이름은 캐시드케이스로 설정해야 합니다: paddingTop 대신 padding입니다.-top, marginLeft 대신 margin-left와 같이 |
| duration | （옵션）애니메이션이 얼마나 오래 실행될지 결정하는 문자열 또는 숫자입니다. 기본 값은400밀리초 가능한 값:
|
| easing | （옵션）애니메이션의 다른 포인트에서 요소의 속도를 지정합니다. 기본 값은 "swing"입니다。 가능한 값:
|
| callback | （可选）animate 함수가 실행된 후에 실행되는 함수。 |
$(selector).animate({styles}, {options})| 파라미터 | 설명 |
|---|---|
| styles | 필수. 애니메이션 효과를 생성하는 하나나 여러 개의 CSS 속성을 지정/값（위와 같습니다）。 |
| options | （선택 사항）애니메이션의 추가 옵션을 지정 선택 사항:
|