개발자가 원하는 방향으로 효과를 만들고 싶을 때 사용하는 메서드
- animate( ) : 사용자 지정 효과를 생성한다
- $(selector).animate(object);
- $(selector).animate(object, speed);
- $(selector).animate(object, speed, easing);
- $(selector).animate(object, speed, easing, callback);
animate( ) 메서드의 첫 번째 매개변수인 객체에 입력할 수 있는 속성
- opacity
- height
- top
- width
- left
- margin
- right
- padding
- bottom
<style>
div {
width: 50px;
height: 50px;
background-color: orange;
position: relative;
}
</style>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
$(function () {
$('div').hover(function () {
$(this).animate({
left: 500,
top: 100
}, 'slow');
}, function () {
$(this).animate({
left: 0,
top: 0
}, 'slow')
});
});'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 35) - 애니메이션 큐 (0) | 2020.08.14 |
|---|---|
| JS jQuery (part. 34) - 상대적 애니메이션 (0) | 2020.08.14 |
| JS jQuery (part. 32) - 기본 시각 효과 (0) | 2020.08.13 |
| JS jQuery (part. 31) - 입력 양식 이벤트 (0) | 2020.08.12 |
| JS jQuery (part. 30) - 윈도우 이벤트 (0) | 2020.08.12 |
