Question

我是一个JQuery noob尝试进行水平滚动div，当用户在边缘附近徘徊时（特别是最左边或最右边的10％）滚动到侧面。但是，当鼠标离开div时，我希望它完全停止动画。我遇到的问题是它会停止，但会立即重新启动。

Here's a JSFiddle link说明了我的问题。向左或向右移动鼠标10％的div让它滚动（一切都好），然后将其移回中间80％停止它（一切都好）。将鼠标移出div显示＆＃34; EXITED＆＃34;所以我们知道它注册了mouseleave函数（一切都很好），动画会立即停止（好的）（好的）。

但是，动画会立即重新开始！我不明白为什么。它显然不会再次调用动画函数，因为＆＃34; EXITED＆＃34;仍显示在底部，但我不知道它还能再开始制作动画。

有谁知道为什么会这样？更重要的是，有没有人知道如何在mouseleave之后永久停止动画？

对于奖励积分：是否有办法告诉动画＆＃34;慢慢停止＆＃34;而不是立即停止？

Answer 1

我认为它正在发生，因为您在.clearQueue()之后而不是之前调用了.stop()，如果您将其更改为相反的方式似乎可行：

$(this).clearQueue().stop();

<强> See this working JSFiddle

Answer 2

要回答你的第一个问题，可以通过将stop函数放在main函数中来解决这个问题：

$(".scroller").mousemove(function(e){
var h = $('#innerscroller').width()+1130;
var offset = $($(this)).offset();
var position = (e.pageX-offset.left)/$(this).width();

if(position < 0.10) {
    $(this).animate({ scrollLeft: 0 }, 5000);
    $(".status").html(' Percentage:' + position.toFixed(2) + ' lefting');
} else if(position > 0.90) {
    $(this).animate({ scrollLeft: h }, 5000);
    $(".status").html(' Percentage:' + position.toFixed(2) + ' righting');
} else {
    $(this).stop().clearQueue();
    $(".status").html(' Percentage:' + position.toFixed(2));
}
$(".scroller").mouseleave(function(e){
$(this).stop().clearQueue();
$(".status").html('EXITED');

}）; }）;

以下是modified jsfiddle

.stop（）函数只会突然停止，所以如果你真的希望缓慢停止，我会使用this post中找到的技术

JQuery在stop（）调用后重新启动动画

2 个答案: