jQuery 입문 | 이펙트(effect) 효과 | jQuery.fx 객체 프로퍼티

jQuery.fx 객체

jQuery의 jQuery.fx 객체는 이펙트 효과가 구현되는 방법을 제어하는 다양한 프로퍼티를 가지고 있다.

jQuery.fx.speeds 프로퍼티

jQuery.fx 객체의 speeds 프로퍼티는 “slow”, “normal”, “fast” 값을 가지고 이펙트 효과의 속도를 나타낸다.

jQuery에서 제공하는 jQuery.fx.speed 프로퍼티의 기본값은 다음과 같다.

이러한 속도의 기본값을 speeds 프로퍼티를 이용하여 변경할 수도 있다.

아래 예제는 show 프로퍼티 값을 변경하는 예제이다.

$("#btnRun").on("click", function() {
    $(".box").toggle("slow");
});
$("#btnSlow100").on("click", function() {
    jQuery.fx.speeds.slow = 100;
});
$("#btnSlow1000").on("click", function() {
    jQuery.fx.speeds.slow = 1000;
});

코드 실행

jQuery.fx.interval 프로퍼티

jQuery.fx 객체의 interval 프로퍼티는 이펙트 효과가 보여지는 동안의 초당 프레임 수를 나타낸다.

연속적인 프레임에서의 초당 프레임 수는 13으로 기본 설정되어 있습니다
이러한 초당 프레임 수를 interval 프로퍼티를 이용하여 사용 목적에 맞게 변경할 수 있다.

$("#btnRun").on("click", function() {
  $(".box").toggle(3000);
});
$("#btnInterval000").on("click", function() {
  jQuery.fx.interval = 1000;
});
$("#btnInterva13").on("click", function() {
  jQuery.fx.interval = 13
});

코드 실행

이 프로퍼티는 3.0 버전부터는 deprecated 되었다.

jQuery.fx.off 프로퍼티

jQuery.fx 객체의 off 프로퍼티를 true로 설정하면, 모든 이펙트 효과를 사용할 수 없게 된다.

이렇게 이펙트 효과가 비활성화되면, 이펙트 효과는 실행되지 않으며 이펙트 효과의 마지막 상태로 즉시 변경된다.
off 프로퍼티는 특히 구형 버전의 브라우저를 다룰 때 유용하게 사용될 수 있다.

예제

$(function() {
    $("#toggleBtn").on("click", function() {
        // id가 "divBox"인 요소를 1초에 걸쳐 올라가면서 사라지거나 내려오면서 나타나게 함.
        $("#divBox").slideToggle(1000);
    });
    $("#forbidBtn").on("click", function() {
        // jQuery.fx 객체의 off 프로퍼티를 true로 설정함.
        jQuery.fx.off = true;
    });
});

코드 실행

참조

• http://api.jquery.com/jQuery.fx.interval/
• http://api.jquery.com/jQuery.fx.off/