Open In App

jQuery jQuery.fx.interval Property with example

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The jQuery.fx.interval property in jQuery is used to modify the number of frames per second at which animations will run and to change the animation firing rate in milliseconds. Its default value is 13ms.

Syntax:

jQuery.fx.interval = milliseconds;

Parameters: This method accepts single parameter milliseconds which is mandatory. It is used to specify the animation firing rate in milliseconds. It default value is 13 milliseconds.

Example 1: This example uses jQuery.fx.interval property to change the animation firing rate.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery jQuery.fx.interval Property
    </title>
 
    <script src=
    </script>
    <!-- Script to illustrate jQuery.fx.interval
            property -->
    <script>
        $(document).ready(function () {
            $("#toggle").on("click", function () {
                $("div").toggle(5000);
            });
 
            $("#interval").on("click", function () {
                jQuery.fx.interval = 500;
            });
        });
    </script>
 
    <style>
        .box {
            background: green;
            height: 100px;
            width: 100px;
            margin: 50px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
 
        <h2> jQuery.fx.interval property</h2>
 
        <button id="toggle">
            Toggle div
        </button>
 
        <button id="interval">
            Run animation with less frames
        </button>
 
        <div class="box"></div>
 
    </center>
</body>
 
</html>


Output:

Example 2: This example uses jQuery.fx.interval property to change the animation firing rate.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery jQuery.fx.interval Property
    </title>
 
    <script src=
    </script>
    <!-- Script to illustrate jQuery.fx.interval
            property -->
    <script>
        $(document).ready(function () {
            $("#toggle").on("click", function () {
                $("div").toggle(500);
            });
 
            $("#interval").on("click", function () {
                jQuery.fx.interval = 5000;
            });
        });
    </script>
 
    <style>
        .box {
            background: green;
            height: 100px;
            width: 100px;
            margin: 50px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
 
        <h2> jQuery.fx.interval property</h2>
 
        <button id="toggle">
            Toggle div
        </button>
 
        <button id="interval">
            Run animation with less frames
        </button>
 
        <div class="box"></div>
 
    </center>
</body>
 
</html>


Output:



Last Updated : 11 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads