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

Screen Shot 2017-04-23 at 10.15.41 AM
»

How to Use jQuery to Create a Sticky Navigation on Scroll

Creating “sticky” elements is something that can often be ...

article image
»

How to Use jQuery’s Keystroke Methods

jQuery has a few built-in keystroke methods that are all triggered by ...

article image
»

How to Change iFrame Styling Using jQuery

If you’ve ever had the displeasure of working with iFrames, ...

article image
»

How to Use jQuery to Create Blinking Text

Blinking text is one of those cool features that you never actively ...

article image
»

Convert Images to Black and White using jQuery

Converting an image to black and white is no longer a manual event. ...

article image
»

How to Disable Right-Click Menu Using jQuery

There can be dozens of reasons why you may want to disable right ...

article image
»

How to Optimize jQuery Code for Better Performance

jQuery is the most popular client side library, in fact almost every ...

article image
»

Using Head.js to Load All Your JavaScript

In the past few years, client side frameworks/libraries have become ...

article image
»

How to Detect Browser Using jQuery

One of the more frustrating parts of creating a new web project is ...