Skip to main content

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) {    	
    	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)';  
    		var count = 0;  
    		var doBlink = function(){
				.queue(function (next) { 										
					$(this).css( 'color', blinkColor ); 
				.queue(function (next) { 
					$(this).css( 'color', originalColor ); 
				.queue(function (next) { 
					if(count < settings.times || settings.times == 0){
}( 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">
    //with all parameters
    $('.blink-me').jBlink({times: 1000, color: '#FFFF00', duration: 500});

By continuing to use the site, you agree to the use of cookies.