JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

jQueryでアニメーションをグローバルに無効化する方法

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;
});

以下のサンプルコードでは、「Enable」「Disable」ボタンでアニメーションのオン・オフを切り替え、「GO」「BACK」ボタンで画像を左右に移動させることで、その挙動を実際に確認できます。

サンプルコード

<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>

補足ポイント

  • jQuery.fx.off はメソッドではなくプロパティです。true / false を代入して切り替えます。
  • この設定は animate() のほか、fadeIn() や slideDown() など、すべてのエフェクト系メソッドに影響します。
  • 無効化中でもアニメーション処理自体は実行され、要素が最終状態へ即座にジャンプします。完了時のコールバックも通常どおり呼び出されます。
  1. AskAdminアプリを使ってWindows 10のMicrosoftストアを無効にする方法

    最新のWindows 10でAppLockerやグループポリシーを使ってMicrosoftストアを削除・無効化したい場合、EnterpriseエディションまたはEducationエディションが必要です。Windows 10 Proではグループポリシーの利用が制限されており、AppLockerも搭載されていません。この記事では、すべてのエディションのWindows 10でAskAdminアプリを使用してMicrosoftストアを無効化する方法をご紹介します。AskAdminとは？AskAdminは、特定のプログラムやシステム機能へのアクセスをブロックできる、Windows向けの専門ツールです。た

  2. Windows 10で初回ログオン時の「Hi」アニメーションを無効化する方法（グループポリシー・レジストリ）

    Windows 10を新規インストールしたときや、新しいバージョンへアップグレードしたときには、PCのセットアップに数分かかります。この間、「Hi」から始まる一連のウェルカム画面が順番に表示されます。この初回サインインアニメーションは、Windowsレジストリまたはグループポリシーオブジェクトを使って無効にすることが可能です。もちろん、この設定を行ってもセットアップ自体が速くなるわけではありませんが、アニメーションの表示だけをオフにできます。 Windows 10の初回ログオン「Hi」アニメーションを無効にする手順 方法1：ローカルグループポリシーエディターを使用する まずはWindowsグ