How to Create Blinking Text with jQuery

Blinking text is a great way to add some flair to your web page. While it’s not the most subtle of effects, it can be used to good effect if used sparingly.

Have you ever wanted to create blinking text with jQuery? It’s actually a lot easier than you might think. In this tutorial, we’ll show you how to do it. We’ll also cover some of the options you have for customizing your blinking text.

Firstly, we need to create a plugin for blinking text. You can modify the script below or import from the library on nmpjs.

Blinking text plugin:

(function ( $ ) {
    
    $.fn.jBlink = function(options) {    	
    	//configurations
    	var defaults = {            
            color: "", //use element's color
            times: 0, //infinitive
            duration: 500, //milliseconds
        };
    	var settings = $.extend({}, defaults, options );	    
    	

        return this.each(function(){
    		var element = $(this);
    		
    		//blink color         		
    		var originalColor = $(this).css('color');
    		var blinkColor = settings.color != '' ? settings.color : 'rgb(0, 0, 0, 0.1)';  
    		//times
    		var count = 0;  
    		//loop  
    		var doBlink = function(){
    			element.delay(settings.duration)
				.queue(function (next) { 										
					$(this).css( 'color', blinkColor ); 
					next(); 
				})
				.delay(settings.duration)
				.queue(function (next) { 
					$(this).css( 'color', originalColor ); 
					next(); 
				})
				.delay(0)
				.queue(function (next) { 
					count++;									
					next();					
					if(count < settings.times || settings.times == 0){
						doBlink();	
					}
					
				}); 	
			}
			doBlink();    	
			
    	});
    };
 
}( jQuery ));

Then we can call the plugin above to apply blinking affect to any DOM element.

<div class="blink-me">My bliking text</div>
<script type="text/javascript">
    //simple
    $('.blink-me').jBlink();
    //with all parameters
    $('.blink-me').jBlink({times: 1000, color: '#FFFF00', duration: 500});
</script>