Pause & Resume jQuery Animations - pauseResume.js

pauseResume.js is a lightweight, useful jQuery plugin which enables the users to play/pause/resume CSS based animations using jQuery animate() method.

How to use it:

1. Insert the latest version of jQuery library and the pauseresume.js script into the html file.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="pauseresume.js"></script>

2. Animate an element using the jQuery animate() method as these:

$("#element")
  .animate({"opacity": 0.5}, 1000)
  .animate({"left": "+=200px"}, 1000, easing) // relative value
  .animate({"top": "200px"}, 1000, easing) // absolute value
  .animate({"left": "0px"}, 1000, easing)
  .animate({"top": "-=200px"}, 1000, easing)
  .animate({"opacity": "+=0.5"}, 1000, easing)
  // ...
}

3. Pause & resume the animation with mouse interactions.

// pause / resume
$("#element").hover(function() {

  // pause on hover
  $(this).pause();
}, function() {

  // resume on mouse out
  $(this).resume();
  
});

---

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