애니메이션 다시 시작 - 재생 시간을 업데이트하는 방법

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

당신은 실제 비율 폭을 계산하고 유지 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 
    });