X

LATEST #JQUERY NEWS

jQuery Snippets: How to Add/Remove Classes After Delay


In your projects, there can often be instances of wanting to change something (color, size, font family, etc) about an element, but only after a certain amount of time has passed (the time passed can be anywhere from a millisecond to ten minutes to ten hours if you like — its completely up to you and the needs of your project). In jQuery, it’s easy to change elements style or content based on a trigger event (click, for example, is a very common trigger even), but it’s also possible to use time passed as a trigger event of sorts.

As an example, let’s say you have a class called “blue” applied to an element. The class changes the color of the text within any element to blue. If you have it applied to an element but want to remove it from an element after a designated amount of time has passed, you can do so by using jQuery’s .setTimeout() method.

var header = $('#header');
header.addClass('blue');
setTimeout(function() {
 header.removeClass('blue');
}, 4000);

The first line of the snippet establishes the variable header (var header will select the #header element), and the next line adds the blue class to the header element. Then, the .setTimeout() method creates a function that will remove the blue class from the header element after 4000 milliseconds.

If you choose to use this snippet, keep in mind that you can set the time it takes until the class is removed to be anything you’d like — but remember that the increments are in milliseconds, not seconds. In the example above, 4000 milliseconds only equals 4 seconds, so make sure you know the conversion between milliseconds and seconds before setting your time. Also, don’t forget to change the variables, the element selectors, and the classes to reflect that actual names of the variables, elements, and classes within your project.

Conversely, you can also change this code around to ADD a class after a certain amount of milliseconds by swapping out the .removeClass() method for the .addClass() one. Play around with the code for yourself to see how it works!

Recently Published

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 ...

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 Use jQuery to Set Textarea Max Length

If you have a textarea field on any of your sites, it might be a good ...

getTable
»

15 Awesome jQuery Table Plugins

Tables are the most preferred way to display data because rows and ...

article image
»

How to Dynamically Open External Links in New Window

Any web developer will probably know that using the ...

article image
»

How to Use jQuery’s .not() Method

jQuery’s .not() method is a method that allows you to return ...

article image
»

jQuery Snippets: How to Add/Remove Classes After Delay

In your projects, there can often be instances of wanting to change ...