1 분 소요

jQuery.fx 객체를 활용하면 제이쿼리 이펙트의 속도, 프레임률, 활성화 여부를 전역에서 조절할 수 있습니다. .speeds, .interval, .off 속성으로 애니메이션을 세밀하게 제어해보세요.

jQuery.fx란?

jQuery.fx는 제이쿼리 애니메이션 시스템의 전역 설정 객체입니다.

.speeds, .interval, .off 같은 속성을 통해 모든 이펙트 효과에 공통적으로 적용할 속도 및 실행 방식을 조절할 수 있습니다.

1. jQuery.fx.speeds – 속도 설정 커스터마이징

설명

  • .slideToggle("fast")나 .fadeIn("slow")처럼 사용하는 문자형 속도값의 실제 시간(ms)을 정의
  • 기본값:
    • "fast": 200ms
    • "normal": 400ms
    • "slow": 600ms

기본 속도 변경 예제

$("#setBtn").on("click", function() {
  jQuery.fx.speeds.fast = 1000; // "fast" 속도를 1초로 변경
});
$("#toggleBtn").on("click", function() {
  $("#divBox").slideToggle("fast"); // fast → 1초로 작동
});

✅ 팁: speeds를 수정하면 프로젝트 전역에 영향을 미칩니다.

2. jQuery.fx.interval – 프레임 수 조절

설명

  • 애니메이션의 프레임 업데이트 주기 (기본: 13ms → 약 77FPS)
  • 수치를 높이면 느릿하게, 낮추면 더 부드럽게

프레임 조절 예제

$("#setInterval").on("click", function() {
  jQuery.fx.interval = 50; // 초당 약 20프레임
  $("#divBox").fadeToggle(2000);
});

✅ 주의: 너무 높은 FPS는 성능 저하, 너무 낮으면 버벅임이 생길 수 있습니다.

3. jQuery.fx.off – 모든 이펙트 효과 비활성화

설명

  • true로 설정 시 모든 애니메이션은 무시되고 결과만 즉시 적용
  • 효과가 전혀 실행되지 않으며, DOM 상태만 바뀜

예제

$("#forbidBtn").on("click", function() {
  jQuery.fx.off = true; // 모든 애니메이션 비활성화
});
$("#toggleBtn").on("click", function() {
  $("#divBox").slideToggle(1000); // 애니메이션 없이 즉시 상태 변경
});

✅ 디버깅, 테스트 또는 저사양 환경 대응 시 유용

jQuery.fx 주요 프로퍼티 요약

프로퍼티 설명
jQuery.fx.speeds "fast", "slow" 등의 속도값을 ms로 지정 가능
jQuery.fx.interval 애니메이션 프레임 업데이트 주기 (ms 단위)
jQuery.fx.off true일 경우 모든 이펙트 효과 비활성화

활용 팁

  1. 속도 커스터마이징
    • 프로젝트 전반에 사용하는 애니메이션의 속도 감각을 맞추고 싶을 때 유용
    • 예: 모든 “fast” 애니메이션을 500ms로 통일
  2. 성능 최적화
    • 구형 브라우저나 모바일 기기에서 애니메이션을 꺼야 할 경우 fx.off = true 설정
  3. 부드러움과 자원 사이 밸런스
    • .interval 값을 조절하여 부드러운 효과와 성능 사이 균형 유지

질문 정리

기본 “fast” 속도를 바꾸면 어디에 영향을 미치나요?

→ .slideToggle("fast") 등 문자열로 속도를 지정한 모든 애니메이션에 적용됩니다.

jQuery.fx.off이 true면 .slideDown()은 작동하나요?

→ 애니메이션 없이 결과만 즉시 반영됩니다. 슬라이드가 순간적으로 끝나는 것처럼 보입니다.

.interval 값을 변경하면 모든 효과가 느려지나요?

→ FPS만 조절되므로, 효과 전체의 길이(duration)는 동일해도 중간 상태가 덜 부드럽게 보일 수 있습니다.

카테고리:

업데이트:

댓글남기기

참고