連載:jQuery逆引きリファレンス

【エフェクト編】

スクリプト全体のアニメーション効果を無効化するには?
− $.fx.off −

山田 祥寛(http://www.wings.msn.to/
2010/05/21

 低スペックのクライアントでスクリプトを動作させている、あるいは、そもそもアニメーションによってアクセシビリティ上の問題が発生しているなどの理由で、アニメーション機能を無効化したいというケースもあるでしょう。そのような場合には、「$.fx.offプロパティ」をtrueに設定することで、以降のすべてのアニメーション処理を無効化できます。

 例えば、以下の例ではスライドダウン効果をアイコン画像に付与していますが、$.fx.offプロパティをtrue(アニメーションを無効)にしているために、スライドダウンはせずに、そのままアイコン画像が表示状態になります。

<script type="text/javascript">

$(function() {

  $.fx.off = false;

  $('div').slideDown(5000, function() {
    window.alert('表示されました。');
  });
});

</script>

  ……中略……

<div style="display:none">
  <img src="http://www.wings.msn.to/books/978-4-7981-1957-1/978-4-7981-1957-1_logo.jpg" alt="ASP.NET" />
</div>
リスト121 アニメーション機能をオフにする(Off.html)

ブラウザで開く

リスト121の実行結果
▲アニメーションせずにそのままアイコン画像を表示

 $.fx.offプロパティをfalseにするか、$.fx.offプロパティ自体をコメントアウトすると、スライドダウンが正しく動作することも確認してみましょう。



 INDEX
  jQuery逆引きリファレンス
   1.セレクタ編
   2.属性&コンテンツ編
   3.トラバーシング編
   4.要素の操作&ユーティリティ編
   5.コア編
  6.イベント編
   7.エフェクト編
    8.Ajax編(前編)
    9.Ajax編(後編)
    10.jQuery 1.4編
 
インデックス・ページヘ  「jQuery逆引きリファレンス」

TechTargetジャパン

Insider.NET フォーラム 新着記事

@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

RSSフィード

キャリアアップ

- PR -
@IT Sepcial

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパーTechTargetジャパン

@IT Sepcial
ソリューションFLASH