Interface Effects

Hierarchy

  • Effects

Index

Properties

Methods

Properties

interval

interval: number

The rate (in milliseconds) at which animations fire.

see

``

since

1.4.3

deprecated

​ Deprecated since 3.0. See ``.

Cause: As of jQuery 3.0 the jQuery.fx.interval property can be used to change the animation interval only on browsers that do not support the window.requestAnimationFrame() method. That is currently only Internet Explorer 9 and the Android Browser. Once support is dropped for these browsers, the property will serve no purpose and it will be removed.

Solution: Find and remove code that changes or uses jQuery.fx.interval. If the value is being used by code in your page or a plugin, the code may be making assumptions that are no longer valid. The default value of jQuery.fx.interval is 13 (milliseconds), which could be used instead of accessing this property.

example

​ ````Cause all animations to run with less frames.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.fx.interval demo</title>
<style>
div {
width: 50px;
height: 30px;
margin: 5px;
float: left;
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<p><input type="button" value="Run"></p>
<div></div>
​
<script>
jQuery.fx.interval = 100;
$( "input" ).click(function() {
$( "div" ).toggle( 3000 );
});
</script>
</body>
</html>

off

off: boolean

Globally disable all animations.

see

``

since

1.3

example

​ ````Toggle animation on and off

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.fx.off demo</title>
<style>
div {
width: 50px;
height: 30px;
margin: 5px;
float: left;
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<input type="button" value="Run">
<button>Toggle fx</button>
<div></div>
​
<script>
var toggleFx = function() {
$.fx.off = !$.fx.off;
};
toggleFx();
$( "button" ).click( toggleFx );
$( "input" ).click(function() {
$( "div" ).toggle( "slow" );
});
</script>
</body>
</html>

step

step: PlainObject<AnimationHook<Node>>
deprecated

​ Deprecated since 1.8. Use `{@link Tween.propHooks jQuery.Tween.propHooks}`.

jQuery.fx.step functions are being replaced by jQuery.Tween.propHooks and may eventually be removed, but are still supported via the default tween propHook.

Methods

stop

  • stop(): void

  • overridable Clears up the setInterval

    see

    ``

    since

    1.8

    Returns void

tick

  • tick(): void

  • Calls .run() on each object in the jQuery.timers array, removing it from the array if .run() returns a falsy value. Calls jQuery.fx.stop() whenever there are no timers remaining.

    see

    ``

    since

    1.8

    Returns void

timer

  • overridable Creates a setInterval if one doesn't already exist, and pushes tickFunction to the jQuery.timers array. tickFunction should also have anim, elem, and queue properties that reference the animation object, animated element, and queue option to facilitate jQuery.fn.stop()

    By overriding fx.timer and fx.stop you should be able to implement any animation tick behaviour you desire. (like using requestAnimationFrame instead of setTimeout.)

    There is an example of overriding the timer loop in `jquery.requestAnimationFrame`

    see

    ``

    since

    1.8

    Parameters

    Returns void