暂停恢复动画 - 如何更新持续时间

Question

我在恢复动画时遇到了持续时间问题。

这是小提琴：http://jsfiddle.net/xj4wh/1/

基本上我想要做的是我有一个 flexslider，我想在它下面添加一个动画进度条。 flexslider 在这里不是问题，因此小提琴中没有附加功能。

我正在做这样的事情：

    window.flextime = 5000; // this is global var shared by flexslider and my bar

    function run() {
      $(".flexprogress .animator").animate({"width": "100%"}, flextime, run).width(0); 
      // animate from 0 to 100% in duration of 5000 ms and then run in loop from 0 to 100%
    }
    run();

    $(".pseudoflex").mouseenter(function(){
      $(".flexprogress .animator").stop(true);
      // stop the animation on mouseenter
    });

    $(".pseudoflex").mouseleave(function(){
      $(".flexprogress .animator").animate({"width": "100%"}, flextime, run); 
      // continue the animation on mouseleave
      // unupdated flextime is the probem here
    });

所以基本上未更新的时间变量是问题所在。 我不知道如何正确计算，这就是我请求你帮助的原因。

我看到了类似的案例，但没有一个实际上是在以百分比为单位处理宽度，并且由于带有此栏的 flexslider 将在响应式项目中实现，我认为以百分比而不是像素为动画会更好。

我知道有一个简单的解决方案，但我无法为这种情况制定适当的逻辑。

Answer 1

您可以根据保持动画的百分比宽度计算实际百分比宽度并应用持续时间：

DEMO

 $(".pseudoflex").mouseleave(function () {
      var $animator = $(".flexprogress .animator"),
          percentageWidth = $animator.width() / $animator.closest('.flexprogress').width() * 100;

      $animator.animate({
          width: "100%"
      }, flextime * (100 - percentageWidth) / 100, run); // unupdated flextime is the probem here
  });