Execute A Function Before Toggling CSS Classes - jQuery toggleClassAfter
| File Size: | 6.69 KB |
|---|---|
| Views Total: | 325 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.











