fx.offとは
- ここで説明する fx.off とは次の語句からなるjQueryのプロパティです。
- fx
- 読み: エフエックス
意味: effects (エフェクツ, エフェクト) の短縮類似発音語。「効果」の意味。 - off
- 読み: オフ
意味: 離れる、それる、外れる、切れる、停止する
offプロパティの概要
このプロパティは、全てのアニメーションを一括で有効化、または無効化できます。
設定値は boolean 型、つまり true か false です。 true を設定するとアニメーションは無効化されます。また false を設定するとアニメーションは無効化されます。
ただし、本プロパティの設定を反映させるには、実行中のアニメーションがあれば、それを停止する必要があります。
構文
サンプルを見る前に構文を確認しておきます。
このプロパティの値は、直接に参照することはできないようです。 しかし、jQuery オブジェクトの前に不等価演算子を 2重に置くことで現在の値を読み取ることは可能でした。
var blnFxOff = !!jQuery.fx.off;
jQuery.fx.off = boolean;
サンプルコードと実行結果
ここでは、アニメーションさせるための要素として div を、 アニメーションの実行を開始するための要素として button を配置しています。
ボタン要素にはクリックイベントをバインドして、関数をアタッチしています。
関数の処理としては、div 要素の左右移動のアニメーションと fx.off の交互切り替え (トグル) を実装しています。
サンプルコード: CSS
<style>
#idDiv{
position: relative;
left: 0;
top: 0;
background-color: ##lightgreen;
border: thin solid ##lightgray;
padding: 19px;
height: 80px;
width: 80px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="idDiv"> Element </div>
<button id="idButton"><output></output> ( run animation )</button>
<script>...</script>
</body>
- 06: div id="idDiv" (この要素がアニメーションします。)
- 07: button id="idButton" (アニメーションを開始する為のボタンです。)
サンプルコード: script
<script>
$("#idButton output").text(" fx . off = " + !!$.fx.off);
$("#idButton").click(function(){
$("#idDiv").animate({"left":"300px"}, 1000);
$("#idDiv").animate({"left":"0"}, 1000);
$("#idDiv").queue(function(){
$.fx.off = !$.fx.off;
$("#idButton output").text(" fx . off = " + !!$.fx.off);
$("#idDiv").dequeue();
});
});
</script>
- 02, 08: !!$.fx.off (off プロパティの値を取得しています。)
- 03-11: $("#idButton").click(function(){関数の処理}) (idButton の要素がクリックされると 関数の処理 を実行します。)
- 04, 05: $("#idDiv").animate() (idDiv の要素のアニメーションキューを登録しています。)
- 06-10: queue(function(){関数の処理}) (キューに関数を登録しています。キューの順番が回ってくると 関数の処理 が実行されます。)
- 07: $.fx.off = !$.fx.off; (off プロパティを設定しています。 代入される値は 現在の off プロパティ の反対の値となります。)
Element
↑ fx.off = Alternates true and false. ( true と false を交互に繰り返します )
結果として、off プロパティが true の状態でボタンをクリックしてもアニメーションは実行されないことが分かります。