$PauseResumev2.0.1

Pauses and resumes animation executed by the jQuery animate() method.
#jquery-plugin #animation

Getting Started / Demos / Documentation / Source

Getting Started

Browser support

IE 10+, latest of Chrome/FF/Safari, iOS 7+ and Android 2.3+ (except 3.x)

Quick steps to use:

Load files

<!-- 1) Load jQuery -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- 2) Load egjs packaged file -->

<script src="//naver.github.io/egjs-jquery-pauseresume/release/latest/dist/pauseresume.js"></script>

Animate jquery element

var $el = $("#anim");
$el.animate({"left": "300px"});

pause jquery element’s animation

$el.pause(); //pause animation

resume jquery element’s animation

$el.resume(); // resume animation

Demos

demo
Mouse Over Me to pause
//pause / resume by mouse over/out events.
$("#rectBox").hover(function() {
  $(this).pause();
}, function() {
  $(this).resume();
});

// Animate element infinitely
var $rectBox = $("#rectBox");
var easing = "linear";

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

drawRectangle();