jQuery - 恢复动画持续时间

【问题标题】：jQuery - Resume animation durationjQuery - 恢复动画持续时间
【发布时间】：2013-10-03 20:45:36
【问题描述】：

我想在 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;  
        }

问题在于，当动画恢复时，它会重新启动持续时间，并且会变得越来越慢。

【问题讨论】：

标签： jquery animation

【解决方案1】：

函数 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;  
 }

【讨论】：