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
»

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