假设你有一个像这样的特定时间运行的动画:
$('span').animate({opacity : 1}, 10000);
动画很长,因此用户尝试再次单击按钮。动画已经播放了一定的时间,每次可能都不一样。
在第二次点击时是否可以更新动画过程,在用户点击时保持对象的不透明度,只是改变完成所需的时间?
基本上我想在动画中途更新动画过程。
最佳答案
您可以使用animate
的step
选项来跟踪动画的进度。然后根据这些信息,您可以计算动画中剩余的时间。然后停止当前动画并开始一个持续时间减半的新动画。
编辑
看起来传递给 step
的第二个参数包含一个名为 pos
的属性,它告诉您您在动画中的进度。这可以进一步简化事情。
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 %
}
});
});
关于javascript - 你如何使用 jQuery 加速动画中间动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12431099/