Learning jQuery

Blinking text is one of those cool features that you never actively think to add to your projects, but it's still really fun to play around and experiment with as a text effect. While it might not be super versatile in terms of which of your web pages you might want to or be able to include it in, it is a relatively easy and straightforward effect to master.

There are a number of different ways of creating a blinking text effect, but one of the easiest ways to achieve it is by using the fadeOut() and fadeIn() jQuery methods and assigning a slow speed to the methods. This creates a slower blinking effect, like the kind you'd see on a billboard or on a window sign.

To use the effect for any of your projects, check out the code snippet below:

function blink(selector){
 $(selector).fadeOut('slow', function(){
   $(this).fadeIn('slow', function(){
    blink(this);
   });
 });
}

$(document).ready(function(){
 blink('.blink'); 
});

In your own JavaScript files, replace the selector with the actual ID, class, or HTML tag type of the HTML element you'd like to select (it should be text, unless you want to make random shapes and objects start blinking!). You can also customize the speed of the .fadeOut() and .fadeIn() methods. Here, we've used a fixed value ("slow"), but if you prefer it, you can use numbers to represent the amount of milliseconds it takes for the method to be executed.

Once you add this custom function to your JS files, you should easily be able to apply it to any text (or other types of content, if that's what you'd like) easily using the one line of jQuery to pass the selector through the blink function. As always, the code is completely customizable to suit the needs of your own individual pages or projects, so don't be afraid to get creative with it.