ywork2020.com

Title

アニメーションを有効化、または無効化する

目次 (INDEX)

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 の状態でボタンをクリックしてもアニメーションは実行されないことが分かります。

目次に戻る