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();
pause
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);
}
pause1
pause2
pause3
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();
pause
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();
pause
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();
pause
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();
pause
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);
}
pause