Create Blinking Text Without Using a Plugin
There are tons of jQuery plugins available for any kind of text animation. But the use of jQuery plugin should depend on what are you trying to achieve. One should be very careful while using any jQuery plugin as it comes with some bandwidth. Your website needs to download extra kilo bytes when it's viewed in browser and needs to load lots of plugins. Simple text effect can be easily achieved via plain jQuery code. You don’t need any jQuery plugins. In this post, lets us see how to create blink text effect with plain jQuery code.
jQuery, out of the box provides animation methods like fadeIn and fadeout. We can use these methods to create the blink effect. As blink effect involves fading in and fading out only. So let’s create a function which will create the blink effect.
function blinkText(elm){
$(elm).fadeOut('slow', function(){
$(this).fadeIn('slow', function(){
blinkText(this);
});
});
}
In the code above, first a call is made to the fadeout method, which when completed makes a call to function. And this function calls fadeIn method to fade in the text. And this method calls the blinkText method again to create an endless loop of fade out and fade in. And this results in creation of blink effect. Now all you need to do is to call this function on your DOM element.
In the following jQuery code, calls blinkText method on all DOM elements which are having blinkText CSS class.
$(document).ready(function(){
blinkText('.blinkText');
});
fadeIn and fadeout method takes milliseconds as duration. From jQuery documentation, durations are given in milliseconds, so higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.
