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.

(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);
JS Snippet
$(document).ready(function () {
    $(".sparrow").css("color", "#00adee");

Check the full example

<!DOCTYPE html>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/blink.js"></script>        

            $(document).ready(function () {
                    $(".sparrow").css("color", "#00adee");

        <h3>Welcome to <span class="sparrow"></span>. Thank You :)</h3>


Similar Posts

About the Author

Atul Rai
I love sharing my experiments and ideas with everyone by writing articles on the latest technological trends. Read all published posts by Atul Rai.