javascript - 获取时间显示动画当前运行的持续时间

Question

在 jquery 中，我使用以下代码：

  j=-(i)
  if(j%2==1)
  {
    $("#caption1").hide();
    $("#caption1").fadeIn(1000);
    $('#main_div').hide();
    $('#main_div').show(5000);
  }
   }
 if(i%2==0)
 {
    $("#caption1").hide();
    $("#caption1").fadeIn(1000);
    $('#main_div').hide();
    $('#main_div').show(5000);
 }

在显示动画时，我希望动画的持续时间完成？

例如：

我设置它显示动画 5 秒。

显示动画现在开始。

2 秒动画完成[剩余 3 秒]

在这种情况下，我需要在按钮单击时完成此持续时间 [2 秒]？

Answer 1

记下动画开始的时间：

var animationStarted = new Date();
$('#main_div').show(5000);
....

当您需要显示已经过去了多少时间时，取当前时间并减去上一步中保存的时间。

var now = new Date();
var elapsed = ( now.getTime() - animationStarted.getTime() ) / 1000;

演示：http: //jsfiddle.net/NZGU6/