Skip to content
Related Articles

Related Articles

Improve Article

How to make an element “flash” in jQuery ?

  • Last Updated : 14 May, 2020
Geek Week

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=
            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>
  • 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=
        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=
        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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :