jQuery jQuery.fx.interval Property

Quiz

The jQuery.fx.interval property in jQuery controls the duration (in milliseconds) between animation frames in jQuery. The default value is 13 milliseconds.

Adjusting the milliseconds affects the smoothness and performance of animations. Lower milliseconds result in smoother animations but may consume more CPU resources. Higher milliseconds can improve performance but may make animations appear less smooth.

Syntax

Following is the syntax of jQuery jQuery.fx.interval Property −

jQuery.fx.interval = milliseconds;

Parameters

Here is the description of the above syntax −

milliseconds: An integer specifying the interval in milliseconds between animation frames.

Example

This example demonstrates the use of the jQuery.fx.interval property to control the frame interval for animations −

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            // Set the animation frame interval to 50 milliseconds
            jQuery.fx.interval = 50;
            $("#animateBox").animate({left: '+=200px'}, 2000);
        });
    </script>
    <style>
        #animateBox {
            width: 50px;
            height: 50px;
            background-color: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="animateBox"></div>
</body>
</html>

By setting jQuery.fx.interval to 50 milliseconds, the animation of the red box moving 200 pixels to the right over 2 seconds will be less smooth compared to the default setting.

jquery_ref_properties.htm

Print Page