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: