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!
