Jam's story

[JQuery] 애니메이션 중지 본문

WEB/JQuery

[JQuery] 애니메이션 중지

애플쩀 2022. 6. 13. 15:23
  • stop() 애니메이션 효과가 완료되기전에 중지하는데 사용하는 메서드
  • stopAll 대기열에 기본값 (false). true 주면 모두 중지
    • 애니메이션 큐 (대기열 a,b,c,d) fifo 구조
    • 큐에 있는 애니메이션 처리는 어떻게 할건지 true? false?
    • 기본값 false
  • goToEnd 매개변수 
    • 현재 애니메이션을 즉시 완료할 수 있는 여부 지정하는  매개변수
    • 기본값 false

예) $("demo").stop()==stop(false ,false);

 

 

stopAll

선택. 대기 중 애니메이션 중지할지 여부 지정. (참거짓)
false :  모두 멈추지 X. (= 현재 실행 중 메서드만 멈춤.) (기본값)
true :  모두 멈춤 O. (=  모든 메서드 다 멈춤.)

 

goToEnd

선택. 현재 실행 중 애니메이션 완료 여부 지정. (참거짓)

false :  완료 하지 X. (= 바로 멈춤). (기본값)

true :  완료 O. (= 실행 중인 건 끝마침.)

 

stop( stopAll , gotoEnd )

 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 14:31:46</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    div{
        width:100px;
        height: 100px;
        position: absolute;
        background-color: aqua;
    }
</style>
</head>
<body>
<h3>ex02_06.html</h3>
<button id="start">start</button>
<button id="stopff">stop(f,f)</button>
<button id="stopft">stop(f,t)</button>
<button id="stoptf">stop(t,f)</button>
<button id="stoptt">stop(t,t)</button>
<div>hello</div>
<script>
    $("#start").click(function(){
        $("div").animate({left:"200px"},5000) //1
        .animate({fontSize:"3em"},5000); //2
    });
    $("#stopff").click(function(){
                    //stopAll gotoEnd
        $("div").stop(false,false);
    //1 애니 처리할때 stopff버튼 클릭 1애니중지 2큐에 남아있다. 
    //진행중인 애니메이션만 멈추고 다음 애니메이션은 진행    
    });

    $("#stopft").click(function(){
        $("div").stop(false,true);
        //현재 애니메이션 끝으로 가고 대기열 애니메이션 진행
    });
    $("#stoptf").click(function(){
                    //stopAll gotoEnd
        $("div").stop(false,false);
     //stopAll: true 대기열의 애니메이션까지 모두 멈춤
    });
    $("#stoptt").click(function(){
        $("div").stop(true,true);
        //현재 애니메이션 끝으로 가고, 대기열 애니메이션도 진행X  
    });
</script>
</body>
</html>
 
        

 

2번째 예제 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2022.06.13 14:48:14</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    div{
        position:absolute;
        background-color: #abc;
        left: 0px;
        top: 130px;
        width: 60px;
        height: 160px;
        margin: 5px;
    }
</style>
</head>
<body>
<h3>ex02_07.html</h3>
<button id="go">go</button>
<button id="stop">stop</button>
<button id="back">Back</button>
<button id="slideToggle">slideToggle()</button>
<div class="block"></div>
<script>
    $("#go").click(function(){
        //현재 진행중인거 모두 멈추고 현재 기준에서 +이동 
        $(".block")
        .stop(true,false) //현재 block div 태그 실행중인+ 큐 애니매이션 중지 
        .animate({
            left:"+=100px"
        },5000);
    });
    $("#stop").click(function(){
        $(".block").stop(true,false);
    });
    $("#back").click(function(){
        //현재 진행중인거 모두 멈추고 현재 기준에서 -이동 
        $(".block").stop(true,false)
        .animate({
            left:"-=100px"
        },5000);
    });
    $("#slideToggle").click(function(){
        //현재 진행중인거 모두 멈추고 현재 기준에서 -이동 
        $(".block").stop(true,false)
        .slideToggle(5000);
    });
</script>
</body>
</html>

 

3번째

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SS16 2022. 6. 13. - 오후 3:07:41</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
  .container{
    width: 400px;
    height: 200px;
    border:1px solid gray;
    position: relative;
    overflow: hidden;
  }
   .container div{
      height: 100%;
      width: 100%;
      position: absolute;
      color:white;
      text-align: center;
   }
   #box1{ background-color: red }
   #box2{ background-color: blue }
</style>
</head>
<body>

<h3>ex02_08.html</h3>

<button>start</button>

<div class="container">
  <div id="box1">A</div>
  <div id="box2">B</div>
</div>
	       
<script>
  $("#box2").css("left" , $("#box2").width() );
  
  $("button").click(  function (){
	  // 2초마다 함수 실행
	  setInterval(function() {
	  	$(".container div:first")        // box1
	  	       .stop(false, true) //현재 애니메이션 완료하고, 대기 애니매이션 진행 
	  	       .animate(  { left:"-=400px"} , { queue:false} )
	  	       .next()   // box2
	  	             .stop(false, true)
	  	             .animate({ left:"-=400px"} ,function (){
	  	            	 // 애니메이션 처리 완료 된 후 호출되는 콜백함수
	  	            	 //                       box1
                         //문서에서 제거해서 변수에 저장 
	  	            	 var box = $(this).prev().detach();
	  	            	 $(".container").append( box );
	  	            	 box.css("left","400px");
	  	             })
	  }, 2000)
  });
</script>	       
</body>
</html>

 

저작자표시 (새창열림)

'WEB > JQuery' 카테고리의 다른 글

[JQuery] css 조작 방법  (0) 2022.06.13
[JQuery] 동적으로 태그 만들기 , 속성가져오기, 요소 추가, contents 가져오기  (0) 2022.06.13
[JQuery] selector 선택자  (0) 2022.06.13
[JQuery] 구문  (0) 2022.06.12
[JQuery] 제이쿼리란?  (0) 2022.06.12
'WEB/JQuery' Related Articles more
Comments