changing the jQuery easing behavior

Question

When you have an Easing for an animation, the animation follows the equation of that easing. This script describes what I mean very well.

Let's assume I did chose an Easing, any easing, and an animation time for example 1000 ms. The animation will follow the easing equation fully. If I split the time to 500 ms, the animation period will split but it'll full the same easing equation.

What I want to do is not to split only the time, but also the easing equation. That is the animation completes, but it doesn't follow the full equation but only the half.

It's a little bit complicated, I know, I wonder if there is a solution.

Answer 1

I would take a look at the Step Function (http://api.jquery.com/animate/). Depending on the collection/object you are animating, this might be a solution to your problem. Another good article to read is http://www.bennadel.com/blog/1856-Using-jQuery-s-Animate-Step-Callback-Function-To-Create-Custom-Animations.htm. Hope that helps:

Step Function The second version of .animate() provides a step option — a callback function that is fired at each step of the animation. This function is useful for enabling custom animation types or altering the animation as it is occurring. It accepts two arguments (now and fx), and this is set to the DOM element being animated.

•now: the numeric value of the property being animated at each step •fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated. Note that the step function is called for each animated property on each animated element. For example, given two list items, the step function fires four times at each step of the animation:

$('li').animate({ opacity: .5,
height: '50%' }, { step: function(now, fx) { var data = fx.elem.id + ' ' + fx.prop + ': ' + now; $('body').append('' + data + ''); } });