Question

jQuery问题。我有动画.block向右移动5000px。

$(".block").animate({"left": "+=5000px"}, 2000, 'linear');

我需要的是在点击后慢慢停止此动画：

('#clickme').click(function() {
 // ... stop $(".block") animation, not immediately, but with some easing
});

这可以用jQuery吗？任何建议将不胜感激。

Answer 1

您可以使用.stop（）函数立即停止动画：

http://api.jquery.com/stop/

然而，它确实很难停止。如果你是动画，那将是一个非常突然的停止。

Answer 2

我会通过在用户点击停止触发器时停止动画来解决这个问题，然后启动一个新的动画，给出一个缓和停止的错觉。这是一个例子：http://jsfiddle.net/brianflanagan/BsQvh/诀窍是调整第二个动画的设置，使事情顺利进行。你需要将持续时间和距离结合起来，以便与原始动画的速度相融合。

Answer 3

我知道这已经过时了，但我会这样做：

var stopping = false;
var lastNow = 0;
$(".block").animate({left:"+=5000px"}, {
    step: function(now){ 
        if (stopping) {
            var delta = lastNow - now;
            $(this).stop().animate({ left : "+=" delta * 2 }, 1000, "easeInOutQuad");
            stopping = false;
        }
        lastNow = now;
    }});

要停止，请将stopping设为true

如何减慢和停止当前的jQuery动画？

3 个答案: