stop() 메서드는 요소에 적용한 애니메이션을 정지시킨다.
delay() 메서드는 요소에 적용한 애니메이션을 지정한 시간만큼 지연시킨다.
* stop() 기본형
| 1) $("요소 선택").stop( ); 2) $("요소 선택").stop(clearQueue, finish); |
1) 진행중인 첫번째 애니메이션만 정지시킨다. 큐에 대기중인 애니메이션은 계속해서 실행한다.
2) clearQueue, finish는 true나 false의 값을 입력할 수 있다. 기본값은 false , clearQueue가 true면 큐에서 대기중인 애니메이션을 모두 제거한다. finish가 true면 진행중인 애니메이션을 강제로 종료시킨다.
① 진행중인 애니메이션만 정지 시키는 경우
$(".txt1").animate({opacity:0.5}, 1000)
.animate({marginLeft:"500px"},1000);
$(".txt1").stop();
② 대기 중인 애니메이션은 제거하고 진행 중인 애니메이션은 강제로 종료하는 경우
$(".txt1").animate({opacity:0.5}, 1000)
.animate({marginLeft:"500px"},1000);
$("txt1").stop(true, true);
정리하자면 stop() 메서드는
stop()은 현재 진행중인 애니메이션만 정지시키고 , 저장소에 대기중인 애니메이션부터 다시 실행시킨다.
stop(true, true)은 저장소에 대기중인 애니메이션을 제거하고, 현재 진행중인 애니메이션도 종료 시점으로 이동한다.
* delay() 기본형
| $("요소 선택").delay(지연시간).애니메이션 효과 메서드(); |
예를들어,
$(".txt1").delay(3000).animate({marginLeft:"500px"}, 1000); // 3초후에 애니메이션이 적용된다.
* 예제
| <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title> 효과와 애니메이션 </title> <script src="js/jquery.js"></script> <script> $(function(){ $(".txt1") .animate({marginLeft:"300px"},1000); $(".txt2").delay(3000) //3초후에 애니메이션이 적용된다. .animate({marginLeft:"300px"},1000); $(".btn1").on("click", moveElement); function moveElement( ) { $(".txt3") .animate({marginLeft:"+=50px"},800); //[버튼1]을 누를 때 마다 class값이 "txt3"인 요소가 0.8초 동안 50px씩 이동한다. $(".txt4") .animate({marginLeft:"+=50px"},800); $(".txt4").stop() //stop()이 실행되면 [버튼1]을 눌러도 애니메이션이 동작하지 않는다. $(".txt5") .animate({marginLeft:"+=50px"},800); $(".txt5").stop(true, true) //stop(true, true)가 실행되면 [버튼1]을 눌러도 애니메이션이 바로 종료시점으로 이동하고 애니메이션없이 css() 메서드를 적용한것처럼 50px씩 이동한다 } }); </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> |
'내마음대로만들어보자 > JS' 카테고리의 다른 글
| clearQueue() 메서드 (0) | 2021.08.25 |
|---|---|
| queue() / dequeue() 메서드 (0) | 2021.08.25 |
| animate() 메서드 (0) | 2021.08.25 |
| fadeTo() 메서드 (0) | 2021.08.25 |
| 효과 및 애니메이션 메서드 (0) | 2021.08.25 |