[Property] JQ - jQuery.fx.interval 속성 - 애니메이션 점화빈도를 밀리초단위로 변경

jQuery.fx.interval 예제

 

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

<script>

$(document).ready(function(){

  $("#toggle").on("click", function(){

    $("div").toggle(5000);

  });

  $("#interval").on("click", function(){

    jQuery.fx.interval = 500;

  });

});

</script>

<style>

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

</style>

<button id="toggle">div 토글</button>

<button id="interval">더 적은 프레임으로 애니메이션 실행</button>

<div id='hz'></div>

 

결과보기

jQuery.fx.interval 정의

 

애니메이션 점화빈도(=프레임간 시간간격 firing rate)를 1/1,000 초 (= 밀리세컨드 = 밀리초)단위로 변경

 

---

 

1.

기본값: 13 밀리초. 

 

2.

애니메이션이 실행될 초당 프레임 수를 수정하는 데 사용.

점화빈도를 낮추면 애니메이션이 더 매끄럽게 실행되나, 성능 및 CPU에 영향 줄 수 있음.

3.

변경사항 적용하려면, 애니메이션이 실행되고 있지 않거나 모든 애니메이션이 먼저 중지되어야 함.

 

4.
requestAnimationFrame 속성 지원 브라우저에는 영향 안 미침.

 

jQuery.fx.interval 구문

 

jQuery.fx.interval = milliseconds;

 

---

 

milliseconds

필수. 애니메이션 점화비율 (밀리초 단위. 기본값: 13 밀리초)