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:
Article Tags :
Recommended Articles