[Effect] JQ - stop() 메서드 - 선택요소에 대해 현재 실행중인 애니메이션 중지 (= stop메서드 = 스톱메서드/스탑메서드)

목차

1. stop() 예제 - stop()
2. stop() 정의
3. stop() 구문
4. stop() 예제1 - stop(true)
5. stop() 예제2 - stop(true,true)

stop() 예제 - stop()

※ stop() = stop(false,false)

※ 현재 animation만 바로 중지. 나머지는 실행.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  

<script> 

$(document).ready(function(){

  var hz = $("#hz");

  $("#start").click(function(){

    hz.animate({height: 300}, 3000);

    hz.animate({width: 300}, 3000);

    hz.animate({height: 100}, 3000);

    hz.animate({width: 100}, 3000);

  });

  $("#stop").click(function(){

    hz.stop();

  });

});

</script>

<style>

#hz {background:#98bf21;height:100px;width:100px}

</style>

<p>

<button id="start">Start (시작)</button>

<button id="stop">Stop (현재 애니만 중지, 나머지 애니는 실행)</button>

</p>

<div id="hz"></div>

 

결과보기

stop() 정의

 

선택한 요소에 대해 현재 실행중인 애니메이션을 중지.

※ 매개변수 이용해 다양한 방법으로 중지 가능.

 

stop() 구문

 

$(selector).stop(stopAll,goToEnd)

 

---

[매개변수]

 

stopAll

선택. 모든 animation 중지 여부 (예제1)

• false : 모두 중지 X. (= 현재 것만 중지) (기본값)
• true : 모두 중지 O

 

goToEnd

선택. 현재 animation 완성 여부 (예제2)

• false : 현재 완성 X (= 바로 중지 O)
• true : 현재 완성 O (= 바로 중지 X)

 

stop() 예제1 - stop(true)

※ stop(true) = stop(true, false)

※ 모두 바로 중지.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>  

$(document).ready(function(){

  var hz = $("#hz");

  $("#start").click(function(){

    hz.animate({height: 300}, 3000);

    hz.animate({width: 300}, 3000);

    hz.animate({height: 100}, 3000);

    hz.animate({width: 100}, 3000);

  });

  $("#stop").click(function(){

    hz.stop(true);

  });

});

</script>

<style>

#hz {background:#98bf21;height:100px;width:100px}

</style>

<p>

<button id="start">Start (시작)</button>

<button id="stop">Stop (모든 애니 바로 중지)</button>

</p>

<div id="hz"></div>

 

결과보기

stop() 예제2 - stop(true,true)

※ 모두 바로 중지하되, 현재 것은 끝까지 완성.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script>  

$(document).ready(function(){

  var hz = $("#hz");

  $("#start").click(function(){

    hz.animate({height: 300}, 3000);

    hz.animate({width: 300}, 3000);

    hz.animate({height: 100}, 3000);

    hz.animate({width: 100}, 3000);

  });

  $("#stop").click(function(){

    hz.stop(true, true);

  });

});

</script>

<style>

#hz {background:#98bf21;height:100px;width:100px}

</style>

<p>

<button id="start">Start (시작)</button>

<button id="stop">Stop (모든 애니 바로 중지, 단 현재 애니는 완성)</button>

</p>

<div id="hz"></div>

  

결과보기