CODEWITHSUNDEEP
javascriptjqueryanimation
Johnny
Johnny

Reputation: 9964

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

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.

Upvotes: 6

Views: 3788

Answers (4)

Robin Castlin
Robin Castlin

Reputation: 10996

I'm not fully sure if this would work, but consider doing like this:

<div id="box"></div>
<style type="text/css">
div#box {
    -webkit-transition: width 10s;
    -moz-transition: width 10s;
    transition: width 10s;
    background: #000;
    width: 100px;
}
div#box.speedy {
    -webkit-transition: width 5s;
    -moz-transition: width 5s;
    transition: width 5s;
}
</style>
<script style="text/javascript">
    $(function() {
        $('div#box').css('width', '400');
        setTimeout(function() {
            $('div#box').addClass('box');
        }, 2000);
    });
</script>

Basicly let css animate it, and add another class that speeds the transition up.

Upvotes: 0

A.M.K
A.M.K

Reputation: 16795

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.

Upvotes: 2

James Montagne
James Montagne

Reputation: 78650

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

Upvotes: 6

Stphane
Stphane

Reputation: 3456

yes you can ..

You have to stop the animation with "stop()" method then start a new animation against the same node on the same property and as a target value, the original one.

Upvotes: 0

Related Questions