SeouliteLab

jQuery jQuery.fx.off 속성 이해와 활용 예제 본문

프로그래밍

jQuery jQuery.fx.off 속성 이해와 활용 예제

Seoulite Lab 2024. 4. 1. 08:46

jQuery의 jQuery.fx.off 속성은 모든 애니메이션을 비활성화하는 데 사용됩니다. 이를 통해 웹 페이지에서 애니메이션을 일시적으로 비활성화하거나 성능을 향상시킬 수 있습니다. jQuery.fx.off 속성에 대한 이해와 함께 몇 가지 활용 예제를 살펴봅니다.

예제 1: 모든 애니메이션 비활성화

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.fx.off 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="box">이 요소에 애니메이션을 적용합니다.</div>
<button id="toggleBtn">애니메이션 토글</button>

<script>
  $(document).ready(function() {
    $("#toggleBtn").click(function() {
      jQuery.fx.off = !jQuery.fx.off; // 애니메이션 활성화/비활성화 토글
      $("#box").toggle("slow"); // 요소를 부드럽게 토글
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 jQuery.fx.off 속성을 토글하여 애니메이션을 활성화 또는 비활성화합니다.

예제 2: 애니메이션 비활성화 후 애니메이션 실행

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.fx.off 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="box">이 요소에 애니메이션을 적용합니다.</div>
<button id="startBtn">애니메이션 시작</button>

<script>
  $(document).ready(function() {
    $("#startBtn").click(function() {
      jQuery.fx.off = true; // 애니메이션 비활성화
      $("#box").animate({ left: '200px' }, 1000); // 애니메이션 실행
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 애니메이션을 비활성화한 후에 요소를 이동하는 애니메이션을 실행합니다.

예제 3: 애니메이션 비활성화 후 다시 활성화

<!DOCTYPE html>
<html>
<head>
  <title>jQuery jQuery.fx.off 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="box">이 요소에 애니메이션을 적용합니다.</div>
<button id="toggleBtn">애니메이션 토글</button>

<script>
  $(document).ready(function() {
    $("#toggleBtn").click(function() {
      jQuery.fx.off = !jQuery.fx.off; // 애니메이션 활성화/비활성화 토글
      if (!jQuery.fx.off) {
        $("#box").toggle("slow"); // 애니메이션 활성화되면 요소를 부드럽게 토글
      } else {
        $("#box").toggle(); // 애니메이션 비활성화되면 즉시 요소를 토글
      }
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 jQuery.fx.off 속성을 토글하여 애니메이션을 활성화 또는 비활성화한 후에 요소를 토글합니다.

jQuery.fx.off 속성은 모든 jQuery 애니메이션을 비활성화할 수 있습니다. 이를 통해 웹 페이지의 성능을 향상시키거나 애니메이션을 일시적으로 제어할 수 있습니다.

위 예제들에서는 jQuery.fx.off 속성을 사용하여 애니메이션을 활성화 또는 비활성화하는 방법을 살펴보았습니다.

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

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

jQuery .show() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery.speed 속성을 활용한 애니메이션 속도 제어  (0) 2024.04.01
jQuery.fx.interval 속성 이해와 활용 예제  (0) 2024.04.01
jQuery .hide() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .finish() 메서드의 활용 예제와 설명  (0) 2024.04.01
'프로그래밍' Related Articles more