Thursday, October 16, 2025
HomeLanguagesJavascriptHow to make a blinking text using jQuery ?

How to make a blinking text using jQuery ?

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=
    </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=
    </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, neveropen 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!
RELATED ARTICLES

Most Popular

Dominic
32361 POSTS0 COMMENTS
Milvus
88 POSTS0 COMMENTS
Nango Kala
6728 POSTS0 COMMENTS
Nicole Veronica
11892 POSTS0 COMMENTS
Nokonwaba Nkukhwana
11954 POSTS0 COMMENTS
Shaida Kate Naidoo
6852 POSTS0 COMMENTS
Ted Musemwa
7113 POSTS0 COMMENTS
Thapelo Manthata
6805 POSTS0 COMMENTS
Umr Jansen
6801 POSTS0 COMMENTS