How to Create a Flashing Text Effect using jQuery ?

Last Updated : 06 Jul, 2021

In this article, we are going to create a flashing text using jQuery. It is basically, a text which is visible then it goes invisible, and again it comes back to its original visibility and this process is continued repeatedly, then it is called flashing text.

With jQuery, it is very simple to create blinking or flashing text. There are some built-in methods available in jquery which we will use to create flashing text. We have a jQuery method fadeOut() to convert a visible element into a hidden element and another method fadeIn() to convert a hidden element to visible.

Fadein effect: We have to mark display: none on every element using CSS, to show the working of fadeIn() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  
    <!-- Using jquery library -->
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script>   
    
    <style> 
        p { 
            color: red; 
            font-size: 40px; 
            display: none; 
        } 
    </style> 
</head> 
  
<body> 
    <p id="a">Hello</p> 
    <p id="b">Hello</p> 
    <p id="c">Hello</p> 
  
    <script> 
  
        // Fast fade in 
        $("#a").fadeIn("fast") 
  
        //  Slow fade in 
        $("#b").fadeIn("slow") 
  
        // Fade in in 4s 
        $("#c").fadeIn(4000) 
    </script> 
</body> 
  
</html>

Output:

Fadeout: The following example demonstrates the jQuery fadeOut() method.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  
    <!-- Using jquery library -->
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script>   
  
    <style> 
        p { 
            color:blue; 
            font-size: 40px; 
        } 
    </style>  
</head> 
  
<body> 
    <p id="a">Hello</p> 
    <p id="b">Hello</p> 
    <p id="c">Hello</p> 
  
    <script> 
  
        // Fade out in 4s 
        $("#a").fadeOut(1500) 
  
        //  Slow fade out 
        $("#b").fadeOut("slow") 
  
        // Fast fade out 
        $("#c").fadeOut("fast") 
    </script> 
</body> 
  
</html>

Output:

Final Code: When both the above methods are used together, the result will be a flashing text. But the problem with the above code is that the text will blink only once. So to do this process repeatedly, we can use the jQuery setInterval() function.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  
    <!-- Using jquery library -->
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script> 
  
    <style> 
        p { 
            color: blue; 
            font-size: 40px; 
        } 
    </style> 
</head> 
  
<body> 
    <p id="a">Hello</p> 
  
    <script> 
        setInterval(function () { 
            $("#a").fadeOut(200) 
            $("#a").fadeIn(200) 
        },100) 
    </script> 
</body> 
  
</html>