Skip to content
Related Articles

Related Articles

Improve Article
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=
    </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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :