How to make a Blinking Text using jQuery?

Last Updated : 08 Oct, 2024

Given an HTML document, the task is to blink the certain text of an element using jQuery.

Below are the approaches to make a blinking text using jQuery:

Table of Content

Using visibility property
Using opacity property

Approach 1: Using visibility property

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: This example implements the above approach.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to make a blinking text using jQuery ?
    </title>

    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
        </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>
        let el_up = document.getElementById('GFG_UP');
        let 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 () {
                let elem = $(this);
                setInterval(function () {
                    if (elem.css('visibility') == 'hidden') {
                        elem.css('visibility', 'visible');
                    } else {
                        elem.css('visibility', 'hidden');
                    }
                }, 100);
            });
        }
    </script>
</body>

</html>

Output:

Approach 2: Using opacity property

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: This example implements the above approach.

html

<!DOCTYPE HTML>
<html>

<head>
    <title>
        How to make a blinking text using jQuery ?
    </title>

    <script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
        </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>
        let el_up = document.getElementById('GFG_UP');
        let 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:

How to Create Blinking Text using CSS ?

PranchalKatiyar

Improve

Article Tags :

How to make a Blinking Text using jQuery?

Approach 1: Using visibility property

Approach 2: Using opacity property

Similar Reads

Thank You!

What kind of Experience do you want to share?