animate() : 애니메이션 메서드
기본형
$('요소 선택').animate({스타일 속성}, 적용 시간, 가속도, 콜백함수)
1) 스타일 속성 : 애니메이션으로 적용할 스타일 속성
2) 적용 시간 : 동작에 반응하는데 소요되는 시간
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
/*
animate() : 애니메이션 메서드
기본형
$('요소 선택').animate({스타일 속성}, 적용 시간, 가속도, 콜백함수)
1) 스타일 속성 : 애니메이션으로 적용할 스타일 속성
2) 적용 시간 : 동작에 반응하는데 소요되는 시간
*/
$(function() {
$('.btn1').on('click', function() {
$('.txt1').animate({marginLeft:'500px', fontSize: '30px'}, 2000, 'linear', function() {
// btn1을 click 하는 이벤트를 발생 .txt1의 글자가 에니메이션 이벤트 발생 (왼쪽으로 500px 생기니 미는것)오른쪽으로 500px 이동 폰트 사이즈가 30px로 커짐 2초동안 일정한 속도로
alert('모션완료!');
// 모션완료 경고창 뜨고 닫으면
$('.txt1').animate({marginLeft: '0px', fontSize: '18px'}, 2000);
// 다시 .txt1에 에니메이션 이벤트 발생 복귀 2초동안
});
});
$('.btn2').on('click', function() {
$('.txt2').animate({marginLeft: '+=50px'}, 1000);
// 1초동안 오른쪽으로 50px만큼이동
});
});
</script>
<style>
.txt1 {
background-color: aqua;
}
.txt2 {
background-color: pink;
}
</style>
</style>
</head>
<body>
<p><button class="btn1">버튼1</button></p>
<span class="txt1">"500px" 이동</span>
<p><button class="btn2">버튼2</button></p>
<span class="txt2">"500px" 씩 이동</span>
</body>
</html>
