SeouliteLab

jQuery.speed 속성을 활용한 애니메이션 속도 제어 본문

프로그래밍

jQuery.speed 속성을 활용한 애니메이션 속도 제어

Seoulite Lab 2024. 4. 1. 08:49

jQuery의 jQuery.speed 속성은 애니메이션의 기본 속도를 설정합니다. 이를 통해 전역적으로 애니메이션의 기본 동작을 조절할 수 있습니다. jQuery.speed 속성의 사용법과 예제를 통해 자세히 알아보겠습니다.

예제 1: 기본 애니메이션 속도 설정

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

<div id="box">이 요소에 애니메이션을 적용합니다.</div>
<button id="animateBtn">애니메이션 실행</button>

<script>
  $(document).ready(function() {
    jQuery.speed = 1000; // 애니메이션 기본 속도를 1000ms로 설정
    $("#animateBtn").click(function() {
      $("#box").animate({ left: '200px' }); // 요소를 이동하는 애니메이션 실행
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 요소를 이동하는 애니메이션의 기본 속도를 1000ms로 설정하고 애니메이션을 실행합니다.

예제 2: 기본 애니메이션 속도 변경 후 애니메이션 실행

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

<div id="box">이 요소에 애니메이션을 적용합니다.</div>
<button id="animateBtn">애니메이션 실행</button>

<script>
  $(document).ready(function() {
    jQuery.speed = 1000; // 애니메이션 기본 속도를 1000ms로 설정
    $("#animateBtn").click(function() {
      jQuery.speed = 500; // 애니메이션 기본 속도를 500ms로 변경
      $("#box").animate({ left: '200px' }); // 요소를 이동하는 애니메이션 실행
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 애니메이션의 기본 속도를 1000ms로 설정한 후에, 500ms로 변경하여 요소를 이동하는 애니메이션을 실행합니다.

예제 3: 기본 애니메이션 속도 리셋 후 애니메이션 실행

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

<div id="box">이 요소에 애니메이션을 적용합니다.</div>
<button id="animateBtn">애니메이션 실행</button>

<script>
  $(document).ready(function() {
    var originalSpeed = jQuery.speed;
    $("#animateBtn").click(function() {
      jQuery.speed = 1000; // 애니메이션 기본 속도를 1000ms로 설정
      $("#box").animate({ left: '200px' }); // 요소를 이동하는 애니메이션 실행
      setTimeout(function() {
        jQuery.speed = originalSpeed; // 기본 애니메이션 속도를 원래 값으로 리셋
      }, 500);
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 애니메이션의 기본 속도를 1000ms로 설정한 후에, 0.5초 후에 원래의 속도로 리셋하여 요소를 이동하는 애니메이션을 실행합니다.

jQuery.speed 속성은 애니메이션의 기본 속도를 설정합니다. 이 값을 변경하면 페이지 전체에서 애니메이션의 동작을 조절할 수 있습니다.

위 예제들에서는 jQuery.speed 속성을 사용하여 애니메이션의 기본 속도를 설정하고 변경하는 방법을 살펴보았습니다.

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

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

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