How to make a blinking text using jQuery ?

Last Updated : 05 Sep, 2019

Given an HTML document and the task is to blink the certain text of an element using jQuery. There are few techniques to solve this problem which are discussed below:

Approach 1:

Select a particular element from the document.
Toggle its visibility property from hidden to visible and vice-versa after a particular period of time.

Example 1: This example implements the above approach.

<!DOCTYPE HTML>   
<html>   
  
<head>   
    <title>   
        How to make a blinking text using jQuery ? 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head>   
  
<body align = "center">   
      
    <h1 style = "color:green;" >   
        GeeksForGeeks   
    </h1>  
      
    <p id = "GFG_UP" style =  
            "font-size: 15px; font-weight: bold;">  
    </p> 
      
    <button onclick = "GFG_Fun()"> 
        click here 
    </button> 
      
    <p id = "GFG_DOWN" style =  
        "font-size: 20px; font-weight: bold; color:green;">  
    </p> 
      
    <script>   
        var el_up = document.getElementById('GFG_UP'); 
        var el_down = document.getElementById('GFG_DOWN'); 
          
        el_up.innerHTML = "Click on the button to start " 
                        + "the text blinking."; 
        el_down.innerHTML = "Binking Text"; 
          
        function GFG_Fun() { 
            $('#GFG_DOWN').each(function() { 
                var elem = $(this); 
                setInterval(function() { 
                    if (elem.css('visibility') == 'hidden') { 
                        elem.css('visibility', 'visible'); 
                    } else { 
                        elem.css('visibility', 'hidden'); 
                    }     
                }, 100); 
            }); 
        } 
    </script>   
</body>   
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Approach 2:

Select a particular element from the document.
Animate its opacity property from 0 to 1 and vice-versa after a particular period of time.

Example 2: This example implements the above approach.

<!DOCTYPE HTML>   
<html>   
  
<head>   
    <title>   
        How to make a blinking text using jQuery ? 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head>   
  
<body align = "center">   
      
    <h1 style = "color:green;" >   
        GeeksForGeeks   
    </h1>  
      
    <p id = "GFG_UP" style =  
            "font-size: 15px; font-weight: bold;">  
    </p> 
      
    <button onclick = "GFG_Fun()"> 
        click here 
    </button> 
      
    <p id = "GFG_DOWN" style =  
        "font-size: 20px; font-weight: bold; color:green;">  
    </p> 
      
    <script>   
        var el_up = document.getElementById('GFG_UP'); 
        var el_down = document.getElementById('GFG_DOWN'); 
        el_up.innerHTML = "Click on the button to start " 
                        + "the text blinking."; 
        el_down.innerHTML = "Binking Text"; 
          
        function blink(selector) { 
            $(selector).animate({opacity:0}, 50, "linear",  
            function() { 
                $(this).delay(100); 
                $(this).animate({opacity:1}, 50, function(){ 
                    blink(this); 
                }); 
                $(this).delay(100); 
            }); 
        } 
          
        function GFG_Fun() { 
            blink('#GFG_DOWN'); 
        } 
    </script>   
</body>   
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Suggest improvement

Default Constructor in JavaScript

How to convert list of elements in an array using jQuery ?

Share your thoughts in the comments

How to make a blinking text using jQuery ?

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?