SeouliteLab

jQuery .stop() 메서드 이해와 활용 예제 본문

프로그래밍

jQuery .stop() 메서드 이해와 활용 예제

Seoulite Lab 2024. 4. 1. 08:55

jQuery의 .stop() 메서드는 현재 진행 중인 모든 애니메이션을 중지합니다. 이를 통해 웹 페이지에서 애니메이션의 부드러운 정지를 제어할 수 있습니다. .stop() 메서드의 사용법과 예제를 살펴보겠습니다.

예제 1: 기본적인 애니메이션 정지

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .stop() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>

<div id="box"></div>
<button id="animateBtn">애니메이션 시작</button>
<button id="stopBtn">애니메이션 정지</button>

<script>
  $(document).ready(function() {
    $("#animateBtn").click(function() {
      $("#box").animate({ left: '500px' }, 2000); // 요소를 오른쪽으로 이동하는 애니메이션 시작
    });
    $("#stopBtn").click(function() {
      $("#box").stop(); // 현재 진행 중인 애니메이션 중지
    });
  });
</script>

</body>
</html>

위 코드에서는 "애니메이션 시작" 버튼을 클릭하면 요소가 오른쪽으로 이동하는 애니메이션을 시작하고, "애니메이션 정지" 버튼을 클릭하면 해당 애니메이션을 중지합니다.

예제 2: 애니메이션을 즉시 종료하고 원래 위치로 돌아가기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .stop() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: relative;
    }
  </style>
</head>
<body>

<div id="box"></div>
<button id="animateBtn">애니메이션 시작</button>
<button id="stopBtn">애니메이션 정지</button>

<script>
  $(document).ready(function() {
    $("#animateBtn").click(function() {
      $("#box").animate({ left: '500px' }, 2000); // 요소를 오른쪽으로 이동하는 애니메이션 시작
    });
    $("#stopBtn").click(function() {
      $("#box").stop(true, true); // 현재 진행 중인 애니메이션을 즉시 종료하고 원래 위치로 돌아감
    });
  });
</script>

</body>
</html>

위 코드에서는 "애니메이션 시작" 버튼을 클릭하면 요소가 오른쪽으로 이동하는 애니메이션을 시작하고, "애니메이션 정지" 버튼을 클릭하면 해당 애니메이션을 즉시 종료하고 원래 위치로 돌아갑니다.

.stop() 메서드는 현재 진행 중인 모든 애니메이션을 중지합니다. .stop() 메서드에는 두 가지 옵션이 있습니다. 첫 번째 옵션은 애니메이션을 즉시 종료하고 원래 위치로 돌아가는지 여부를 지정하며, 두 번째 옵션은 대기열에서 애니메이션을 지워야 하는지 여부를 지정합니다.

위 예제들에서는 .stop() 메서드를 사용하여 애니메이션을 제어하는 방법을 살펴보았습니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

파이썬 Pydantic 라이브러리: 데이터 검증 및 설정을 위한 간편한 도구  (0) 2024.04.01
jQuery .toggle() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .slideUp() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .slideToggle() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .slideDown() 메서드 이해와 활용 예제  (0) 2024.04.01
'프로그래밍' Related Articles more