Pause & Resume jQuery Animations - pauseResume.js

Pause & Resume jQuery Animations - pauseResume.js
File Size: 216 KB
Views Total: 3227
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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="" 
<script src="pauseresume.js"></script>

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

  .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
}, function() {

  // resume on mouse out

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