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