animate
English[ˈænəˌmet]
vt. 생기를 불어넣다;
adj에 생명을 불어넣다;
jquery 애니메이션() 메서드 통사론
기능: animate() 메서드는 CSS 속성 집합의 사용자 정의 애니메이션을 수행합니다. 이 방법은 CSS 스타일을 통해 요소를 한 상태에서 다른 상태로 변경합니다. CSS 속성 값은 점진적으로 변경되어 애니메이션 효과를 만들 수 있습니다. 숫자 값만 애니메이션화할 수 있습니다(예: "여백:30px"). 문자열 값은 애니메이션화할 수 없습니다(예: "배경색:빨간색"). 상대 애니메이션을 만들려면 "+=" 또는 "-="를 사용하세요.
구문 1: $(selector).animate(styles,speed,easing,callback)
매개변수:
| Parameters | Description |
| styles | 필수 . 애니메이션 효과를 생성하는 CSS 스타일과 값을 지정합니다. |
| 속도 | 선택사항. 애니메이션의 속도를 지정합니다. 기본값은 "정상"입니다. 가능한 값: 밀리초(예: 1500) "느림" "보통" "빠름" |
| easing 선택 사항. 다양한 애니메이션 지점에서 애니메이션 속도를 설정하는 여유 함수를 지정합니다. 내장된 여유 기능: 스윙 선형 확장에서 더 많은 여유 기능이 제공됩니다. | |
| 선택사항. animate 함수가 실행된 후 실행될 함수입니다. |
| 매개변수 | 설명 |
| 스타일 | 필수입니다. 애니메이션 효과를 생성하는 CSS 스타일과 값을 지정합니다(위와 동일). |
| options | 선택사항. 애니메이션에 대한 추가 옵션을 지정합니다. 가능한 값: speed - 애니메이션 속도 설정 easing - 사용할 easing 함수를 지정합니다. callback - 애니메이션이 완료된 후 실행할 함수를 지정합니다. step - 애니메이션의 각 단계가 완료된 후 실행할 함수를 지정합니다. - 부울 값. 애니메이션을 효과 대기열에 배치할지 여부를 나타냅니다. false인 경우 애니메이션이 즉시 시작됩니다. SpecialEasing - 스타일 매개변수에 있는 하나 이상의 CSS 속성 맵과 해당 여유 기능 |
jquery 애니메이션() 메서드 예
<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
$(".btn2").click(function(){
$("#box").animate({height:"100px"});
});
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요