デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.fx.offすべてのアニメを無効にする

構文

すべてのアニメを無効にする返値:数値
jQuery.fx.off = true ver1.3〜
※jQueryは$に置き換え可能

機能

jQuery.fx.offは、jQueryで実行する全てのアニメに関わる「プロパティ」で、trueを設定することでアニメでの演出を行わないようにします。アニメを実行するように戻したい時はfalseを設定します。

非常にスペックの低い環境で再生する場合などにtrueにすると良いと本家のページで説明していますが、よほど昔のスマートフォンでもなければ心配ないと思います。

解説

まずはjQuery.fx.offを利用しないサンプルから

jQuery.fx.offの機能と比較するため、jQuery.fx.offを設定しないサンプルから確認します。
サンプル(off/01.html)を開いてbody内の構成にdiv要素が1つあることを確認してください。jQueryは以下のように記述され、div要素をクリックするとanimateメソッドを利用して、2つのアニメを実行するようになっています。

$("div").click(function(){
	$("div").animate({left:300}, 3000);
	$("div").animate({top:300}, 3000);	
});

結果として、div要素をクリックするとdiv要素が3秒かけて右に移動し、続いて3秒かけて下に移動します。

jQuery.fx.offを利用したサンプル

ではjQuery.fx.offを利用したサンプルを確認します。
サンプル(off/02.html)を開いてbody内の構成はoff/01.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様にjQuery.fx.offプロパティにtrueを設定している点だけです。

jQuery.fx.off = true;
$("div").click(function(){
	$("div").animate({left:300}, 3000);
	$("div").animate({top:300}, 3000);	
});

結果として、div要素をクリックするとアニメの演出なしに左下に移動します。animateメソッドで指定した期間の3秒も関係なく、一瞬で処理されます。

メモ

アニメの途中で実行しても効果ありません

jQuery.fx.offは現在実行されているアニメを変更することはできないようです。つまりjQuery.fx.offが効果を発揮するのは、jQuery.fx.offを設定した後で実行されるアニメのみということです。

サンプル(off/test01.html)を開いてbody内にbutton要素が追加されたことを確認して下さい。このbuttonをクリックすると以下の様にjQuery.fx.intervalを設定するようにしています。

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

このサンプルで、最初にdiv要素をクリックしてアニメを開始して下さい。その後でbuttonをクリックしてもアニメは変更されません。ページをリロードして、今度は先にbuttonをクリックしてからdiv要素をクリックして下さい。この順番だとアニメが実行されずに左下に移動します。