有没有办法及时向前/向后跳jQuery动画?
例如,如果我在元素上设置动画需要10秒,我可以跳到该动画的“5秒”吗?优选地,这可以设置为百分比。
答案 0 :(得分:0)
答案 1 :(得分:0)
您可以停止当前动画,将动画对象的状态设置为初始状态和最终状态之间的一半,然后将新动画启动到原始最终状态,但设置为一半时间。
这将跳到动画的中途位置,然后继续从那里开始。
以下是一个有效的例子:http://jsfiddle.net/jfriend00/FjqKW/。
答案 2 :(得分:0)
这应该包含您想要的所有内容,但功能百分比:
演示:http://jsfiddle.net/SO_AMK/MHV5k/
jQuery:
var time = 10000; // Animation speed in ms
var opacity = 0; // Final desired opacity
function jumpAnimate(setOpacityTo, newOpacity, speed){ // I created a function to simplify things
$("#fade").css("opacity", setOpacityTo).animate({
"opacity": newOpacity
}, {
duration: speed // I used speed instead of time because time is already a global variable
});
}
$("#jump").click(function(){
var goTo = $("#jump-to").val(); // Get value from the text input
var setOpacity = (1 / time) * (time - goTo); /* The opacity that the element should be set at, i.e. the actual jump
Math is as follows: initial opacity / the speed of the original animation in ms * the time minus the desired animation stop in ms (basically the remaining time past the desired point) */
$("#fade").stop(); // Stop the original animation after the math is finished so that we have minimal delay
jumpAnimate(setOpacity, opacity, time - goTo); // Start a new animation
});
jumpAnimate(1, opacity, time); // Start the initial animation