jQuery jQuery.fx.interval Property with example

Last Updated : 11 Jul, 2023

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

<html>

<head>
    <title>
        jQuery jQuery.fx.interval Property
    title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    script>
    
    <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 propertyh2>

        <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

<html>

<head>
    <title>
        jQuery jQuery.fx.interval Property
    title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    script>
    
    <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 propertyh2>

        <button id="toggle">
            Toggle div
        button>

        <button id="interval">
            Run animation with less frames
        button>

        <div class="box">div>

    center>
body>

html>

Output:

Comment

Explore