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