How to blink text in HTML using jQuery
In this example, we are going to show how to blink/flashes a text in HTML using jQuery. To do this we set the visibility of text hidden and visible at a time duration.
blink.js
(function ($) {
$.fn.blink = function (options) {
var defaults = {delay: 500};
var options = $.extend(defaults, options);
return $(this).each(function (x, y) {
setInterval(function () {
if ($(y).css("visibility") === "visible") {
$(y).css('visibility', 'hidden');
} else {
$(y).css('visibility', 'visible');
}
}, options.delay);
});
};
}(jQuery));JS Snippet
$(document).ready(function () {
$(".sparrow").blink();
$(".sparrow").css("color", "#00adee");
});Check the full example
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/blink.js"></script>
<script>
$(document).ready(function () {
$(".sparrow").blink();
$(".sparrow").css("color", "#00adee");
});
</script>
</head>
<body>
<h3>Welcome to <span class="sparrow">WebSparrow.org</span>. Thank You :)</h3>
</body>
</html>Similar Posts
About the Author
