본문 바로가기
프로그래밍/jQuery

jQuery.fx.interval, 에니메이션 프레임 조절

by zoo10 2012. 4. 16.

jQuery.fx.interval

원문 링크 http://api.jquery.com/jQuery.fx.interval/

jQuery.fx.intervalReturns : Number

개요 : 에니메이션 프레임 조절(밀리세컨드 기준).

  • jQuery.fx.interval

이 속성은 애니메이션이 실행되는 초당 프레임의 개수를 조정하는 것을 조절할 수 있습니다. 기본값은 13 밀리세컨드 즉, 0.013초 입니다. 값을 낮게 잡으면 크롬과 같은 브라우져에서는 에니메이션이 부드럽게 작동하지만, CPU 점유율이 올라가는 단점이 있습니다.

jQuery 는 하나의 전역 인터벌(global interval)을 사용하기 때문에, 애니메이션을 멈추려면 이 속성값을 변경해야 합니다.

Note:jQuery.fx.interval 는 현재 Google Chrome 11 버젼과 같은 requestAnimationFrame 속성을 지원하는 브라우저에서는 작동하지 않습니다. 이 문제는 이후 릴리스에서 변경될 수 있습니다.

제가 사용하는 크롬 버젼은 18이네요. ㅎㅎ;; 욕은 아닙니다.

예 제  
모든 에니메이션을 적은 프레임으로 세팅하여 실행합니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    div { width:50px; height:30px; margin:5px; float:left;
          background:green; }
    </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p><input type="button" value="Run"/></p>
<div></div>
<script>
jQuery.fx.interval = 1000;

$("input").click(function(){
  $("div").toggle( 3000 );
});
  </script>

</body>
</html>

미리보기

뚝뚝 끊어지는 거 보이시죠? 사실 interval 값이 100으로 되어 있었는데 제가 1000으로 수정했습니다. 효과가 더 잘보이라구요. 참고하세요.

 

알아서 나쁠건 없습니다. 까먹어도 되긴 하지만요. ㅎㅎㅎ

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.