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:
Please Login to comment...