jQuery入門 | エフェクト(effect)効果 | jQuery.fxオブジェクトプロパティ

jQuery.fxオブジェクト

jQueryのjQuery.fxオブジェクトには、エフェクト効果が実装される方法を制御するさまざまなプロパティがある。

jQuery.fx.speedsプロパティ

jQuery.fxオブジェクトのspeedsプロパティは、“slow”、“normal”、“fast"の値を持ち、エフェクト効果の速度を表す。

jQueryが提供するjQuery.fx.speedsプロパティのデフォルト値は次のとおりである。

これらの速度のデフォルト値は、speedsプロパティを使用して変更することもできる。

次の例は、showプロパティ値を変更する例である。

$("#btnRun").on("click", function() {
    $(".box").toggle("slow");
});
$("#btnSlow100").on("click", function() {
    jQuery.fx.speeds.slow = 100;
});
$("#btnSlow1000").on("click", function() {
    jQuery.fx.speeds.slow = 1000;
});

コードを実行

jQuery.fx.intervalプロパティ

jQuery.fxオブジェクトのintervalプロパティは、エフェクト効果が表示されている間の1秒あたりのフレーム数を表す。

連続するフレームの1秒あたりのフレーム数は、デフォルトで13に設定されている。
この1秒あたりのフレーム数は、intervalプロパティを使用して用途に合わせて変更できる。

$("#btnRun").on("click", function() {
  $(".box").toggle(3000);
});
$("#btnInterval000").on("click", function() {
  jQuery.fx.interval = 1000;
});
$("#btnInterva13").on("click", function() {
  jQuery.fx.interval = 13
});

コードを実行

このプロパティはバージョン3.0からdeprecatedになった。

jQuery.fx.offプロパティ

jQuery.fxオブジェクトのoffプロパティをtrueに設定すると、すべてのエフェクト効果を使用できなくなる。

このようにエフェクト効果が無効化されると、エフェクト効果は実行されず、エフェクト効果の最後の状態にすぐ変更される。
offプロパティは、特に古いバージョンのブラウザーを扱うときに有用である。

例

$(function() {
    $("#toggleBtn").on("click", function() {
        // idが"divBox"である要素を1秒かけて上に消える、または下に現れるようにする。
        $("#divBox").slideToggle(1000);
    });
    $("#forbidBtn").on("click", function() {
        // jQuery.fxオブジェクトのoffプロパティをtrueに設定する。
        jQuery.fx.off = true;
    });
});

コードを実行

参照

• http://api.jquery.com/jQuery.fx.interval/
• http://api.jquery.com/jQuery.fx.off/