How do you speed up an animation mid animation with jQuery?

Question

Suppose you have an animation running with a certain time like this:

$('span').animate({opacity : 1}, 10000);

The animation is quite long so the user tries clicking the button again. The animation will be a certain amount of time through the animation already, which is probably going to be different every time.

On the second click is it possible to update the animation process keeping the opacity of the object when the user clicks, just changing the time it will take to finish?

Basically I want to update the animation process mid way through the animation.

Answer 1

You can use the step option of animate to keep track of how far along the animation is. Then with that information, you can calculate the time remaining in the animation. Then stop the current animation and start a new one with half the duration.

http://jsfiddle.net/MdD45/

EDIT

It looks like the 2nd parameter passed to step contains a property named pos which tells you what percentage along in the animation you are. That can simplify things further.

http://jsfiddle.net/MdD45/1/

var startVal = 0;
var endVal = 1;
var duration = 10000;

var howfar = 0;

$('span').css("opacity",startVal)
    .animate({
        opacity : endVal
    }, {
        duration: duration,
        step: function(now, fx){
            howfar = fx.pos;  // between 0 and 1, tells how far along %
        }        
    });

$("button").click(function(){
    // calculate the new duration as half of the remaining duration
    var timeRemaining = duration - (howfar * duration);
    duration = timeRemaining / 2;

    $('span').stop().animate({
        opacity : endVal
    }, {
        duration: duration,
        step: function(now, fx){
            howfar = fx.pos;  // between 0 and 1, tells how far along %
        }        
    });
});
​

Answer 2

I put something together yesterday to skip in jQuery animations, here's the code, it should be pretty easy to modify for your use-case:

EDIT: Modified version:

Demo: http://jsfiddle.net/SO_AMK/fJyKM/

jQuery:

var time = 10000;
var opacity = 1;
var currentTime = 0;

$("#square").animate({
    opacity: opacity
}, {
    duration: time,
    step: function(now, fx) {

        currentTime = Math.round((now * time) / opacity);

    },
    easing: "linear"
});


$("#hurry").click(function() {
    $("#square").stop().animate({
        opacity: opacity
    }, {
        duration: ((time - currentTime) / 4), // Get remaining time, divide by 4
        step: function(now, fx) {

            currentTime = Math.round((now * time) / opacity);

        },
        easing: "linear"
    });
});​

It also works for other properties, like width. The only catch is that if it is a decreasing value than you need to use a different script.