How to make an element “flash” in jQuery ?

14 May, 2020
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.<!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="https://code.jquery.com/jquery-3.4.1.min.js"        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>
<!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="https://code.jquery.com/jquery-3.4.1.min.js"        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>
CSS Code: Let us design the elements using CSS to make the page attractive.CSS code:<style>    .header {        margin-left: 18px;        color: rgb(0, 153, 0);    }      .element {        border: 2px solid black;        width: 12vw;        padding: 5px;    }</style>
CSS code:
<style>    .header {        margin-left: 18px;        color: rgb(0, 153, 0);    }      .element {        border: 2px solid black;        width: 12vw;        padding: 5px;    }</style>
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.
$(document).ready(() => {    setInterval(() => {        $('p').fadeIn();        $('p').fadeOut();    }, 500);});
Example:
<!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">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>
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:
<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>
The following JavaScript will help us to make the text element flash with a different color:
$(document).ready(() => {    setInterval(() => {        switch ($("p").attr("class")) {            case "text flash1":                $("p").toggleClass("flash1 flash2");                break;                          case "text flash2":                $("p").toggleClass("flash2 flash1");        }    }, 500);});
Example:
<!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>
Output:
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.