Queue, Pause, Resume Functions With jQuery - oknowthis.js

oknowthis.js is a jQuery plugin which can be used to chain, play, pause, resume, reset complex animations triggered by a sequence of JS functions.

How to use it:

1. Import the latest version of jQuery library and the jQuery oknowthis.js script into the page.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="js/okaynowthis.js"></script>

2. Build the queue using the keyframes method.

var stage = $('#element');

// build our queue
stage.okaynowthis('keyframe', 0, function () {
  // keyframe 1
}).okaynowthis('keyframe', 1000, function () {
  // keyframe 2, delay = 1000ms
}).okaynowthis('keyframe', 500, function () {
  // keyframe 3
})

3. Pause the queue.

stage.okaynowthis('pause',function(){
  // do something on pause
})

3. Resume the queue.

stage.okaynowthis('resume',function(){
  // do something on resume
})

4. reset the queue.

stage.okaynowthis('reset',function(){
  // do something on reset
})

5. Style the elements depending on the current status.

.okaynowthis-playing {
  /* When playing */
}

.okaynowthis-paused {
  /* When paused */
}

.keyframe-1 {
  /* keyframe 1 */
}

...

.keyframe-x {
  /* keyframe x */
}

---

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