jQuery缓动：如何将动画作为一种缓动动画链接在一起？

Question

I have two animations that I would like to group as one animation so that the easing will carry over and continue into the next animation. The second animation needs to start after the first one has finished. This is what I have so far, but the easing starts over when the second animation begins (which is what I would have expected).

$progressBar.animate({width: progressBarWidth + '%'}, barAnimationSpeed, 'swing', function(){
    $overGoalBar.animate({width: overGoalBarWidth + '%'}, barAnimationSpeed, 'swing', function(){});
});

Here's an example of how it works right now .

How can I group these animations into one easing animation?

Answer 1

If you want to demonstrate dynamically created percentage value of progress bar with easing effect.

I would use server created background Image

ex) Using GD Library in PHP

and set that image as background of one DIV tag in CSS.

#progressBar { background-img('Dynamically-created-image.jpg'); }

Lastly just animate that one DIV tag once.

If I have understood you correctly, this idea might work.

Answer 2

Here is a great online tool for writing a custom easing function...

http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm

Also, here is more information in general about easing... you do not need the easing plugin if you have an easing function. From the links contained within, you can see a demo of each and then compare to the easing function behind it...

How can I add aceleration to this jQuery animation?

Answer 3

Have you tried using linear ?

$('#progressBar').animate({width: 50 + '%'}, 2500, 'linear', function(){
    $('#overGoalBar').animate({width: 49 + '%'}, 2500, 'linear', function(){});
});

It's note exactly chaining two animations together, but it does smooth it out.

http://jsfiddle.net/dkBMA/11/