jQuery Introduction | Effects | jQuery.fx Object Properties

Tags:

jQuery.fx object

jQuery’s jQuery.fx object has various properties that control how effects are implemented.

Property Description
jQuery.fx.speeds Represents effect speeds with millisecond values such as “slow” and “fast”.
jQuery.fx.interval Represents the number of frames per second while an effect is displayed.
jQuery.fx.off Disables all effects so they cannot be used.

jQuery.fx.speeds property

The speeds property of the jQuery.fx object represents effect speeds with the values “slow”, “normal”, and “fast”.

The default values of the jQuery.fx.speeds property provided by jQuery are as follows.

Property value Milliseconds
fast 200
normal 400
slow 600

You can also change these default speed values by using the speeds property.

The following example changes the value of the show property.

$("#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;
});

Run code

jQuery.fx.interval property

The interval property of the jQuery.fx object represents the number of frames per second while an effect is displayed.

The default number of frames per second for continuous frames is set to 13.
You can change this frame rate to match your purpose by using the interval property.

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

Run code

This property has been deprecated since version 3.0.

jQuery.fx.off property

When the off property of the jQuery.fx object is set to true, all effects become unavailable.

When effects are disabled in this way, the effects do not run and immediately change to their final state.
The off property can be especially useful when dealing with older browser versions.

Example


$(function() {
    $("#toggleBtn").on("click", function() {
        // Makes the element whose id is "divBox" disappear upward or appear downward over 1 second.
        $("#divBox").slideToggle(1000);
    });
    $("#forbidBtn").on("click", function() {
        // Sets the off property of the jQuery.fx object to true.
        jQuery.fx.off = true;
    });
});

Run code

References