jQuery로 애니메이션 전역 비활성화하기: jQuery.fx.off 활용법

jQuery에서 애니메이션 효과를 전역적으로 비활성화하려면 jQuery.fx.off 속성을 사용하면 됩니다. 이 속성을 true로 설정하면 페이지 내 모든 애니메이션이 즉시 최종 상태로 전환되어 실행되지 않으며, 저사양 기기나 접근성 환경에서 유용하게 활용할 수 있습니다.

애니메이션 활성화하기

애니메이션을 다시 활성화하려면 jQuery.fx.off 값을 false로 설정합니다.

$("#enable").click(function(){
    jQuery.fx.off = false;
});

애니메이션 비활성화하기

반대로 애니메이션을 비활성화하려면 jQuery.fx.off 값을 true로 설정합니다.

$("#disable").click(function(){
    jQuery.fx.off = true;
});

전체 예제 코드

아래 예제는 버튼 클릭으로 애니메이션을 켜고 끄며, 이미지 요소를 좌우로 이동시키는 실습 코드입니다. 직접 실행해 보면서 동작을 확인해 보세요.

<html>
<head>
<title>jQuery 예제</title>
    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script language = "javascript">
        $(document).ready(function() {

            $("#enable").click(function(){
                jQuery.fx.off = false;
            });

            $("#disable").click(function(){
                jQuery.fx.off = true;
            });

            $("#go").click(function(){
                $(".target").animate({left: '+=200px'}, 2000);
            });

            $("#back").click(function(){
                $(".target").animate({left: '-=200px'}, 200);
            });

        });
    </script>

<style>
p {background-color:#bca; width:350px; border:1px solid green;}
div{position: absolute; left: 50px; top:300px;}
</style>
</head>

<body>

<p>Enable 또는 Disable 버튼을 클릭한 후 GO 또는 BACK 버튼을 눌러보세요:</p>

<button id = "enable"> Enable</button>
<button id = "disable"> Disable </button>
<button id = "go"> GO</button>
<button id = "back"> BACK </button>

<div class = "target">
    <img src = "./images/jquery.jpg" alt = "jQuery" />
</div>

</body>

</html>

동작 방식 정리

Enable 버튼: jQuery.fx.off = false → 애니메이션이 정상적으로 재생됩니다.
Disable 버튼: jQuery.fx.off = true → 모든 애니메이션이 비활성화되고 요소가 즉시 목표 위치로 이동합니다.
GO / BACK 버튼: 대상 요소를 각각 오른쪽/왼쪽으로 200px씩 이동시킵니다.

이처럼 jQuery.fx.off 속성 하나만으로 사이트 전체의 애니메이션 동작을 손쉽게 제어할 수 있습니다.