How to make a blinking text using jQuery ?

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:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?