Я хочу иметь паузу анимации, когда window.active == false
и возобновить, когда window.active == true
.
var time = 15;
if(window.active == true){
time=time-1;
$('#bar').animate({
width:'100%'
}, 15000);
} else {
var myDiv = $("#bar");
myDiv.clearQueue();
myDiv.stop();
time=time;
}
Проблема в том, что когда анимация возобновляется, она перезапускает длительность и становится более медленной.
функция stop() сбросит анимацию, и при повторном запуске анимации она снова станет оригиналом. Чтобы решить эту проблему, вы можете сделать отметку времени и рассчитать оставшуюся дюранцию при возобновлении.
var time = 15, duration=15000, remainingDuration, iniAnimation, pauseAnimation;
if(window.active == true){
time=time-1;
if(pauseAnimation) {
remainingDuration -= pauseAnimation-iniAnimation;
$('#bar').animate({
width:'100%'
}, remainingDuration);
pauseAnimation = null;
iniAnimation = new Date().getTime();
}
else {
$('#bar').animate({
width:'100%'
}, duration);
remainingDuration = duration;
iniAnimation = new Date().getTime();
}
} else {
var myDiv = $("#bar");
myDiv.clearQueue();
myDiv.stop();
pauseAnimation = new Date().getTime();
time=time;
}