javascript - How do you speed up an animation mid animation with jQuery? - Stack Overflow

admin管理员组

文章数量:1295859

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.

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.

• javascript
• jquery
• animation

Share Improve this question Follow edited Sep 14, 2012 at 21:13 Johnny asked Sep 14, 2012 at 19:53 JohnnyJohnny 9,97455 gold badges3333 silver badges3636 bronze badges 3

• Interesting question, but... Why do you want the slow animation in the first place? I can't think of terribly many good reasons for anything that's going to slow down your users' ability to navigate your web page. – KRyan Commented Sep 14, 2012 at 19:56
• You could use the step function bennadel./blog/… – Ana Commented Sep 14, 2012 at 20:03
• OK, done. It needed to be reversed for fading-in animations instead of fading-out animations and to speed up instead of skipping. – A.M.K Commented Sep 14, 2012 at 20:25

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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

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/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.

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.

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.

本文标签： javascriptHow do you speed up an animation mid animation with jQueryStack Overflow