How to make an element “flash” in jQuery ?

Last Updated : 20 Dec, 2023

In this article, we will create flashing elements using jQuery. To use jQuery you need to add jQuery CDN into your HTML document. The methods to create a flashing element are discussed below.

Table of Content

Using fadeIn() and fadeOut() Methods
Using toggleClass() method

Approach 1: Using fadeIn() and fadeOut() Methods

In this approach, we will set consecutive fadeIn() and fadeOut() methods on the element and then set an interval to ensure the flashing continues indefinitely.

Example: The below example will explain the use of the fadeIn() and fadeOut() methods for creating a flashing element.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, 
          initial-scale=1.0">
 
    <title>
        How to make an element
        "flash" in jQuery?
    </title>
 
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
            integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
        </script>
 
    <style>
        .header {
            margin-left: 18px;
            color: rgb(0, 153, 0);
        }
 
        .element {
            border: 2px solid black;
            width: 12vw;
            padding: 5px;
        }
    </style>
</head>
 
<body>
    <h2 class="header">GeeksforGeeks</h2>
    <div class="element">
        <p class="text flash1">
            This is the flashing element
        </p>
    </div>
 
    <script>
        $(document).ready(() => {
            const lheight = $('.element').
            height();
            setInterval(() => {
                $('p').fadeIn();
                $('p').fadeOut();
 
                // The following code keeps the 
                // height of the div intact 
                if ($('.element').height() !== 0) {
                    $('.element').css('height', 
                                      `${lheight}px`);
                }
            }, 500);
        });
    </script>
</body>
 
</html>

Output:

Approach 2: Using toggleClass() method

In this method, we will use the toggleClass() method to flash the element by adding and removing the class within a particular interval using the setInterval() method.

Example: The below method will explain the use of toggleClass method to flash the element.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0">
 
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
            integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous">
        </script>
 
    <title>
        How to make an element
        "flash" in jQuery?
    </title>
 
    <style>
        .header {
            margin-left: 16px;
            color: rgb(0, 153, 0);
        }
 
        .element {
            border: 2px solid black;
            width: 12vw;
            padding: 5px;
        }
 
        .flash1 {
            color: black;
        }
 
        .flash2 {
            color: rgb(0, 153, 0);
        }
    </style>
</head>
 
<body>
    <h2 class="header">Geeks for Geeks</h2>
    <div class="element">
        <p class="text flash1">
            This is the flashing element
        </p>
    </div>
 
    <script>
        $(document).ready(() => {
            setInterval(() => {
                switch ($("p").attr("class")) {
                    case "text flash1":
                        $("p").
                        toggleClass("flash1 flash2");
                        break;
                    case "text flash2":
                        $("p").
                        toggleClass("flash2 flash1");
                }
            }, 500);
        }); 
    </script>
</body>
 
</html>