Common Notice:
1. (PC) When mouse pointer is over the box in the yellow area, this box will be paused. and when mouse pointer is leave the box, this box will be resumed.
2. (Mobile) Press button(s) above a yellow test box to pause/resume.
3. Before pause/resume, observe the animation first. and check it acts identically after pause/resume

Marquee

Test marquee
		
function testMarquee() {
  $voxNews
    .animate({'margin-left' : '-' + marqueeWidth + 'px'}, marqueeWidth * 10, 'linear')
    .animate({'margin-left' : 0}, marqueeWidth * 10, "linear", testMarquee);
}
testMarquee();
		
	

Individual Element Test

Test other element is not affected when an specific element is paused.
		
function startIndividualElementTest() {
  function phase1() {
    $(this)
      .animate({"left":200}, 1000, phase2);
  }
  function phase2() {
    $(this)
      .animate({"left":0}, 1000, phase1);
  }

  $individualBox.animate({"left":200}, 1000, phase2);
}
		
	

Chaining Test

Test the red box is drawing a rectangle clockwise with maintaining the easing status after pause and resume.
		
function drawRectangle() {
  $rectBox
    .animate({"opacity": 0.5}, 1000)
    .animate({"left":"+=200px"}, 1000, "easeOutElastic")//relative value
    .animate({"top":"200px"}, 1000, "easeOutElastic")//absolute value
    .animate({"left":"0px"}, 1000, "easeOutElastic")
    .animate({"top":"-=200px"}, 1000, "easeOutElastic")
    .animate({"opacity": "+=0.5"}, 1000, drawRectangle)
}

drawRectangle();
		
	

Easing Test

Test the easing status is maintaining well after pause and resume.
	
function startEasingTest() {
  $easingBox
    .animate({"left": "+=200px"}, 3000, "easeInOutBounce")
    .animate({"left": 0}, startEasingTest);
}
startEasingTest();
	
	

Relative Test

Test the easing status is maintaining well after pause and resume.
	
function startRelativeTest() {
  $relativeBox
    .animate({"left": "+=50", "top": "+=50"})
    .animate({"left": "+=50", "top": "+=50"})
    .animate({"left": "+=50", "top": "+=50"})
    .animate({"left": "-=150", "top": "0"}, startRelativeTest)
}

startRelativeTest();
	
	

Non-CSS Property animation by step/complete callback

Test pause/resume is running ok while counting from 1 to 10.
	
function counter(){
  var myDiv = $('#counter');
  myDiv.animate({Counter: 10}, {
    duration: 2000,
    easing: 'linear',
    step: function () {
      this.Counter && $(this).text(Math.ceil(this.Counter));
    },
    complete: function() {
      this.Counter = 0;
      $(this).text("1");
      counter();
    }
  });
};
counter();
	
	

Delay Test

Test delay can be paused and resumed
	
$delayBox
  .animate({"left":"100px"}, function() {
    startDelayCounter(delayDuration);
  })
  .delay(delayDuration)
  .animate({"left":"+=100px"}, function() {
    $.style(this, "left", 0);
  }