SeouliteLab

jQuery .finish() 메서드의 활용 예제와 설명 본문

프로그래밍

jQuery .finish() 메서드의 활용 예제와 설명

Seoulite Lab 2024. 4. 1. 08:43

jQuery의 .finish() 메서드는 현재 실행 중인 모든 애니메이션을 즉시 완료합니다. 이를 통해 애니메이션을 즉시 중단하고, 애니메이션의 최종 상태로 설정할 수 있습니다. .finish() 메서드의 사용법과 몇 가지 예제를 살펴보겠습니다.

예제 1: 애니메이션 즉시 완료

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

<div id="box"></div>
<button id="stopBtn">애니메이션 중지</button>

<script>
  $(document).ready(function() {
    $("#stopBtn").click(function() {
      $("#box").finish(); // 애니메이션 즉시 완료
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 현재 실행 중인 애니메이션을 즉시 완료합니다.

예제 2: 여러 요소의 애니메이션 즉시 완료

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

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<button id="stopBtn">애니메이션 중지</button>

<script>
  $(document).ready(function() {
    $("#stopBtn").click(function() {
      $(".circle").finish(); // 모든 요소의 애니메이션 즉시 완료
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 모든 요소의 애니메이션을 즉시 완료합니다.

예제 3: 특정 애니메이션 종료 후 처리

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

<div id="box"></div>
<button id="stopBtn">애니메이션 중지</button>

<script>
  $(document).ready(function() {
    $("#stopBtn").click(function() {
      $("#box").finish().fadeOut(); // 애니메이션 즉시 완료 후 fadeOut 애니메이션 실행
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 현재 실행 중인 애니메이션을 즉시 완료한 후에 fadeOut 애니메이션을 실행합니다.

.finish() 메서드는 현재 실행 중인 모든 애니메이션을 즉시 완료합니다. 이를 통해 애니메이션을 강제로 중단하고, 원하는 애니메이션 상태로 설정할 수 있습니다.

위 예제들에서는 다양한 상황에서 .finish() 메서드를 사용하여 애니메이션을 즉시 완료하는 방법을 살펴보았습니다.

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

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

jQuery.fx.interval 속성 이해와 활용 예제  (0) 2024.04.01
jQuery .hide() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .fadeToggle() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .fadeTo() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .fadeOut() 메서드의 활용 예제와 설명  (0) 2024.04.01
'프로그래밍' Related Articles more