X

LATEST #JQUERY NEWS

How to Use jQuery to Create Blinking Text


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.

Recently Published

article image
»

How to Dynamically Trim Text Using jQuery

This easy beginners jQuery tutorial demonstrates how you can use ...

article image
»

jQuery Snippets: Getting the Current Year

Here’s a fun, simple, and incredibly useful jQuery that you can ...

article image
»

jQuery Snippets: How to Conditionally Enable Submit

One easy way to prevent users from submitting an empty form in a ...

article image
»

How to Use Google Analytics with jQuery Mobile

jQuery Mobile is an HTML5 based web-page framework that’s ...

article image
»

jQuery Snippets: Using jQuery to Check All Boxes

When you’ve given your users a ton of checkbox input fields ...

article image
»

Useful jQuery Code Snippets for Working with Images

Images are an essential part of any website and sometimes working ...

article image
»

How to Use jQuery to Check if Cookies are Enabled

A cookie (not the kind with chocolate chips) is a small piece of data ...

article image
»

A Beginner’s Guide to jQuery’s Selectors

We talk a lot about event methods on this site, but not so much about ...

article image
»

Add Keyboard Shortcut to Anchor Tag Using jQuery

Making a user friendly website can be quite a challenging task. There ...