To help you better understand how you can use the step
function
[as posted by gdoron]
I created an example using the step function to get the remaining time:
(click the get state!
thton to end the animation and rec themain time!)
demo with distance
demo with opacity
远距离学习 j 质量:
var time = 4000;
var distance = 300;
var currentTime = 0;
$( #ball ).animate({
left: distance
}, {
duration: time,
step: function (now, fx) {
currentTime = Math.round((now * time) / distance);
var data = fx.prop + + Math.round(now) + ; <b> + currentTime + ms</b> ;
$( body ).append( <p> + data + </p> );
},
easing: linear
});
$( #getTime ).click(function () {
$( #ball ).stop();
$( body ).prepend( <p>currentTime is: + currentTime + ms; REMAINING: + (time - currentTime) + ms</p> );
});
- You can see how I used the
fx.prop
inside the animation step
to get the (left
) property that is currently animated.
- You can see how: knowing the animation time and the distance (opacity, whatever...) we can easily retrieve the stopped/paused state by some simple math (
(now*time)/distance
) and thanks to the returned now
value.