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
»

7 Responsive jQuery Dropdown Menu Plugins

Dropdown Menu Plugins Dropdown menus are mostly used for website ...

article image
»

20 Stylish and Modern jQuery Tooltip Plugins

jQuery Tooltip Plugins Tooltips are a great option for showing extra ...

article image
»

15 Newest jQuery plugins for responsive website

Due to the proliferation of smartphones and tablets, responsive ...

article image
»

How to use Redux with jQuery

State management is one of most integral parts of any software and a ...

article image
»

Fade HTML Table Row on Hover Using jQuery

HTML tables are the ideal choice for displaying data in tabular form. ...

article image
»

Drag and Drop HTML Table Rows Using jQuery

HTML tables are the preferred UI option for displaying data. Sorting, ...

article image
»

Top 5 Best JavaScript Template Engines

Template engines help in the decoupling of HTML and JavaScript code ...

article image
»

3 jQuery/JavaScript Plugins for Push Notifications

Push notifications started from the mobile business but this ...

article image
»

Create Smooth Animation Using jQuery’s “stop()”

Making Quick Work jQuery’s animate() method is a quick way to ...