애니메이션 효과 제어 메서드
delay() : 지정한 시간만큼 지연 했다가 애니메이션을 진행
stop() : 현재 실행중인 효과를 모두 정지
스택은 '먼저 들어간 것이 나중에 나오는 자료구조' 로써 초코볼이 담겨있는 통에 비유할 수 있다.
스택은 후입선출, 'LIFO(Last-in, First-out) 구조'의 자료규조이다
push : 초코볼 통에 초코볼을 넣는다
pop : 초코볼 통에서 초코볼을 꺼낸다
peek : 이번에 꺼낼 초코볼의 색이 무엇인지 통 안을 들여다 본다
스택과는 반대로 큐(Queue)는 뒤쪽으로 들어가서 앞쪽
먼저 들어간게 먼저 나옴
기본형
$('요소선택').stop(); // 진행중인 첫번쨰 애니메이션만 정지. 큐에 대기중인 애니메이션은 계속해서 진행.
$('요소 선택').stop(clearQueue, finish); // clearQueue, finish에 true나 false 값을 입력. 기본값은 fasle
clearQueue가 true면 큐에서 대기중인 애니메이션을 모두 제거
finish가 true면 진행 중인 애니메이션을 강제로 종료.
true true 대기중인 애니메이션 삭제 진행중인 애니메이션도 결과값만 보여줌
<!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>
/*
*/
$(function() {
// $('.txt1').animate({marginLeft: '300px'}, 1000); // 창을 열면 바로 marginLeft 애니메이션 실행
$('.txt1').animate({marginLeft: '500px'}, 1000).animate({opacity: 0.5}, 1000);
// 진행중인였던 첫번째 애니메이션 정지, 대기중인 투명해지는 애니메이션은 실행
$('.txt1').stop();
$('.txt2').animate({opacity: 0.5}, 1000).animate({marginLeft: '500px'}, 1000);
$('.txt2').delay(3000).animate({marginLeft: '300px'}, 1000); // delay 로 3초동안 있다가 애니메이션 실행
// true true - 대기중인 애니메이션을 정지하고 첫번재 애니메이션의 효과는 보여주지 않고 결과값만 보여줌
$('.txt2').stop(true, true);
// moveElement 함수 저장
const moveElement = function() {
$('.txt3').animate({marginLeft: '+=50px'}, 800);
$('.txt4').animate({marginLeft: '+=50px'}, 800);
$('.txt4').stop()
// 애니메이션이 바로 종료 시점으로 이동
// 애니이션 없이 css() 메서드를 적용한 것처럼 50px씩 이동
$('.txt5').animate({marginLeft: '+=50px'}, 800);
$('.txt5').stop(true, true)
};
// .btn1에 클릭하면 moveElement 발생하는 이벤트 저장
$('.btn1').on('click', moveElement);
});
</script>
<style>
p {
width: 110px; text-align: center;
}
.txt1 {
background-color: aqua;
}
.txt2 {
background-color: pink;
}
.txt3 {
background-color: orange;
}
.txt4 {
background-color: green;
}
.txt5 {
background-color: gold;
}
</style>
</head>
<body>
<p class="txt1">효과1</p>
<p class="txt2">효과2<br> delay(3000)</p>
<p><button class="btn1">50px 전진</button></p>
<p class="txt3">효과3</p>
<p class="txt4">효과4<br> stop( )</p>
<p class="txt5">효과5<br> stop(true, true)</p>
</body>
</html>
