How to make a blinking text using jQuery ?

0 0 2 minutes read

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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!