Question

恢复动画时我的持续时间有问题。

基本上我想做的是我有一个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
  });

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

1 个答案: