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

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.