How to make an element “flash” in jQuery ?

In this article, we will create flashing elements using jQuery. There are two approaches that are discussed below.

We will use the CDN link to include jQuery content. The CDN link of jQuery must be added to the HTML document.

https://code.jquery.com/

We will use HTML5 and CSS3 to create the structure of our document and add the required elements.

  • HTML Code: We will add some dummy text inside a div element with black border. Subsequently, we will make this text flash.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,
               initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="style.css">
        <script src=
            integrity=
    "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
            crossorigin="anonymous">
            </script>
    </head>
      
    <body>
        <h2 class="header">Geeks for Geeks</h2>
        <div class="element">
            <p class="text flash1">
                This is the flashing element</p>
        </div>
    </body>
      
    </html>

    chevron_right

    
    

  • CSS Code: Let us design the elements using CSS to make the page attractive.

    CSS code:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <style>
        .header {
            margin-left: 18px;
            color: rgb(0, 153, 0);
        }
      
        .element {
            border: 2px solid black;
            width: 12vw;
            padding: 5px;
        }
    </style>

    chevron_right

    
    

  • Output:

Approach 1: Using fadeIn() and fadeOut() Method: 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

$(document).ready(() => {
    setInterval(() => {
        $('p').fadeIn();
        $('p').fadeOut();
    }, 500);
});

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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=
        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">Geeks for Geeks</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>

chevron_right


Output:

Approach 2: Using toggleClass() method: We will use the method to change CSS classes with different designs. As a result, the element will seem to be flash.

Let us add the required CSS classes:

filter_none

edit
close

play_arrow

link
brightness_4
code

<style>
    .header {
        color: rgb(0, 153, 0);
    }
  
    .element {
        border: 2px solid black;
        width: 12vw;
        padding: 5px;
    }
  
    .flash1 {
        color: black;
    }
  
    .flash2 {
        color: rgb(0, 153, 0);
    }
</style>

chevron_right


The following JavaScript will help us to make the text element flash with a different color:

filter_none

edit
close

play_arrow

link
brightness_4
code

$(document).ready(() => {
    setInterval(() => {
        switch ($("p").attr("class")) {
            case "text flash1":
                $("p").toggleClass("flash1 flash2");
                break;
              
            case "text flash2":
                $("p").toggleClass("flash2 flash1");
        }
    }, 500);
});

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1.0">
  
    <script src=
        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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.