jQuery의 효과 메서드는 계속 큐(먼저 들어간 것이 먼저 나오는 공간)에 누적된다
<style>
div {
width: 50px;
height: 50px;
background-color: orange;
position: relative;
}
</style>
<body>
<div></div>
</body>
$(function () {
$('div').click(function () {
$(this).animate({
left: '+=60'
}, 2000).animate({
width: '+=60'
}, 2000).animate({
height: '+=60'
}, 2000)
})
});
animate( ) 메서드를 체이닝으로 연결했다
실행하면 동시에 애니메이션이 실행되는 것이 아니라 차례대로 실행된다
애니메이션 큐에 animate( ) 메서드의 내용이 차례대로 들어가고 나오면서 순서대로 동작한다
애니메이션 큐 관리 메서드
- clearQueue( ) : 큐의 내용을 제거한다
$(function () {
$('div').animate({ left: '+=60' }, 2000)
$('div').animate({ width: '+=60' }, 2000)
$('div').animate({ height: '+=60' }, 2000)
setTimeout(function () {
$('div').clearQueue();
$('div').hide();
}, 3000)
});
animate({width: '+=60'}, 2000) 이 실행되다가 중단되고 div가 사라지는 것이 아니라
hide( ) 메서드를 빼고 실행해보면 진행중인 animate( ) 메서드를 중단시키지는 않는다
2초동안 width가 정해진 값만큼 모두 늘어난다
clearQueue( ) 메서드는 이전에 실행되던 애니메이션을 정지하는 기능은 없다
'Frontend > jQuery' 카테고리의 다른 글
| JS jQuery (part. 36) - 애니메이션 정지 (0) | 2020.08.14 |
|---|---|
| JS jQuery (part. 34) - 상대적 애니메이션 (0) | 2020.08.14 |
| JS jQuery (part. 33) - 사용자 정의 효과 (0) | 2020.08.13 |
| JS jQuery (part. 32) - 기본 시각 효과 (0) | 2020.08.13 |
| JS jQuery (part. 31) - 입력 양식 이벤트 (0) | 2020.08.12 |
