пауза возобновить анимацию - как обновить продолжительность

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 
    }); 

Поэтому в основном unupdated переменное время является проблемой. Я не знаю, как правильно выполнить вычисления, и именно поэтому я прошу вас помочь.

Я видел подобные случаи, но не из них фактически работал на ширину в процентах, и поскольку flexslider с этим баром будет реализован в отзывчивом проекте, я подумал, что было бы лучше оживить в процентах вместо пикселей.

Я знаю, что существует простое решение, но я просто не могу сформулировать правильную логику для этого случая.

Answer 1

Вы можете рассчитать фактическую процентную ширину и применять длительность по сколько процентов семе WITDH продолжает анимировать:

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 
    });