jQuery

Create blinking text using jquery


In one of my projects I had to create to neon bulb like animation but using jQuery. The idea was simple. To switch CSS text color property at every set interval. Also use a neon tube like font so that it gets more creative and gets the dedicated look.

Here’s how its done

First let me share with you the HTML & jquery code used. Then I will explain it step by step.

<p class="bling_txt neon" >It's the time to Disco</p>
$(function(){
    $bling_txt = function($id){
        setInterval(function()
            {
                $($id).css({
                    'color' : '#ffff00'
                });
               
                setTimeout(function(){
                    $($id).css({
                        'color' : '#ff00cc'
                    });
                }, 500);
               
                setTimeout(function(){
                    $($id).css({
                        'color' : '#00ff00'
                    });
                }, 1000);
               
                setTimeout(function(){
                    $($id).css({
                        'color' : '#00ffff'
                    });
                }, 1500);
               
            }, 2000
        ); // every 2 second
    }
    $bling_txt('.bling_txt');
   
});

Step 1

First we create a function named $bling_txt with a $id as its input variable. I follow this method so that later we can input as many elements as we want through the $id variable and get the same codes executed.

$bling_txt = function($id){

}

Step 2

Inside this function I create a ‘setInterval’ function. W3Schools define it as “The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).” So every 1000 milliseconds = 1 Sec. We set this at the end of the function. In our case I want setInterval to execute the set of codes every 2 seconds. So its 2000 milliseconds. How did I arrive at 2 seconds is explained later in this tutorial.

$bling_txt = function($id){
    setInterval(function() {
   
    }, 2000
    ); // every 2 second
}

Step 3

With $id as the selector we use the jquery .css() function and change the color of the $id element.

$($id).css({
    'color' : '#ffff00'
});

Step 4

Now the second color change has to happen after a period of time. So we use setTimeout() function. W3Schools define setTimeout() function as “The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.” The milliseconds is again set at the end of the function just like in setInterval() function.

setTimeout(function(){
    //Code to execute
}, timeIn_milliseconds );
// replace  'timeIn_milliseconds' with the actual time in milliseconds.

In our case I set it to happen after 500 milliseconds delay.

Step 5

Continuing on I follow the same setTimeout() function for different colors with a time difference of 500 milliseconds.

$bling_txt = function($id){
    setInterval(function()
        {
            $($id).css({
                'color' : '#ffff00'
            });
           
            setTimeout(function(){
                $($id).css({
                    'color' : '#ff00cc'
                });
            }, 500);
           
            setTimeout(function(){
                $($id).css({
                    'color' : '#00ff00'
                });
            }, 1000);
           
            setTimeout(function(){
                $($id).css({
                    'color' : '#00ffff'
                });
            }, 1500);
           
        }, 2000
    ); // every 2 second
}

Step 6

Now all the setTimeout() functions are enclosed within setInterval() function. We need to make sure that the setInterval() function repeats itself only after all the setTimeout() function have been executed. And that is why after the last 1500 milliseconds we have set the time of setInterval() to 2000 milliseconds, so that we have a delay of 500 milliseconds. If setInterval() was anywhere lesser that 2000 milliseconds then we will not be able to see the last setTimeout() effect as there will not be any time delay between this color change and the first color change.

So add the enough time delay in setInterval() function.

Conclusion

And there it is. The magic happens. You can add CSS Transition properties like so:

.transition {
    -moz-transition: all 0.6s ;
    -webkit-transition: all 0.6s ;
    transition: all 0.6s ;
}

to get a smooth transition effect that is shown in the demo.

Use it anywhere in your design to show animated text color change or to grab attention to any of the sections. You can see this effect in this website on the ‘Share it you like it!’ text above social sharing section. Let me know how you have used this effect in your project. Would love to know how we can improve this code too. Thanks for reading!

Latest Comments

Leave a Reply

comment on this article