Execute A Function Before Toggling CSS Classes - jQuery toggleClassAfter

File Size: 6.69 KB
Views Total: 319
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Execute A Function Before Toggling CSS Classes - jQuery toggleClassAfter

This is an extension to the jQuery .toggleClass() method that toggles CSS classes from each element in the set of matched elements after a function has been executed, with or without a timeout.

How to use it:

1. Load the minified version of the toggleClassAfter plugin after jQuery library (slim build).

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="toggleClassAfter.min.js"></script>

2. Add or remove one or more classes from a specified element after executing a certain callback.

<div id="demo"></div>
#demo {
  background: #222;
}

.alter {
  background: #cc00ff !important
}
// add CSS Classes
$("#demo").toggleClassAfter( "alter", () => {
  // your own function here
});

// remove CSS Classes
$("#demo").toggleClassAfter( "alter", () => {
  // your own function here
}, false);

3. Add or remove one or more classes from a specified element after executing a certain callback with a timeout.

var count = 0;
var interval;
$("#demo").toggleClassAfter( "alter", ( setTimeout, clearTimeout, setInterval, clearInterval ) => {
  interval = setInterval( () => {
    count++;
    if (count > 3) {
      clearInterval(interval);
    }
  }, 1000 );
});

This awesome jQuery plugin is developed by robpop. For more Advanced Usages, please check the demo page or visit the official website.