animate() 메소드
animate() 메소드는 여러개의 CSS 속성을 이용하여 새로운 이펙트 효과를 만들 수 있습니다.
프로퍼티 파라미터는 필수로 받고, 이펙트 효과를 구성할 CSS 속성을 적어줍니다.
지속 시간으로는 이펙트 효과가 지속될 시간을 말합니다.
시간당 속도 함수는 이펙트 효과의 시간당 속도를 말합니다.
콜백 함수는 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의하면 됩니다.
아래 예제를 통하여 확인해 보도록 하겠습니다.
<body>
<style>
#divBox {
width: 100px;
height: 100px;
position: absolute;
background-color: yellow;
border: 5px solid red;
margin-top: 20px;
}
</style>
<script>
$(function() {
$("#animateBtn").on("click", function() {
$("#divBox").animate(
{
left: "+=100",
capacity: 0.2
}, 500, function() {
$("#text").html("효과가 반영되었습니다.");
}
)
})
})
</script>
<h1>.animate() 메소드</h1>
<button id="animateBtn">이펙트 효과 시작!</button>
<p id="text">이펙트 효과가 모두 끝나면 이 텍스트는 변경될 거에요!</p>
<div id="divBox"></div>
</body>
출력 결과
왼쪽으로 0.5초만에 이동됨과 동시에 투명도가 살짝 설정된 예제입니다.
'1. 웹개발 > 1_1_2 Jquery' 카테고리의 다른 글
| [Jquery] parentsUntil() - 상위요소 가져오는 방법 (0) | 2020.05.21 |
|---|---|
| [Jquery] $.each() - 요소 각각에 대하여 함수 실행 (4) | 2020.04.19 |
| [Jquery] delay(), stop(), finish() - 효과 정지하는 방법 (0) | 2020.04.18 |
| [Jquery] slideUp(), slideDown() - 슬라이드 효과 내는 방법 (0) | 2020.04.18 |
| [Jquery] fadeIn(), fadeOut() - 페이드 효과 내는 방법 (0) | 2020.04.12 |
