CODEWITHSUNDEEP
jqueryjquery-animateduration
Fowowski
Fowowski

Reputation: 1

pause resume animation - how to update duration

I've got a problem with duration while resuming the animation.

Here's the fiddle: http://jsfiddle.net/xj4wh/1/

Basically what Im trying to do is I have a flexslider and I want to add a animated progress bar below it. The flexslider is not a problem here so there's no functionality attached into the fiddle.

I am doing something like this:

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

So basically the unupdated time variable is the problem. I dont know how to make the calculations properly and this is the reason why Im asking for you help.

I saw similar cases but non of them was actually working on width in percentages and since flexslider with this bar will be implemented in responsive project I thought that it would be better to animate in percentages instead of pixels.

I know that there is a simple solution but I just cannot formulate the proper logic for this case.

Upvotes: 0

Views: 88

Answers (1)

A. Wolff
A. Wolff

Reputation: 74420

You could calculate actual percentage width and apply duration according how much percentage witdh keeps to be animated:

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

Upvotes: 1

Related Questions