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

我是一个jquerynoob，试图创建一个水平滚动的

div

，当用户将鼠标悬停在边缘附近（特别是最左边或最右边的10%）时，它会向两侧滚动。但是，当鼠标离开

div

时，我希望它完全停止动画。我遇到的问题是，它确实停止了，但随后会立即重新启动

这说明了我的问题。将鼠标向左或向右移动div的10%会使其滚动（一切正常），然后将鼠标移回中间80%会使其停止（一切正常）。将鼠标移出div会显示“EXITED”，这样我们就知道它注册了

mouseleave

功能（一切正常），并且动画在运行时会立即停止（一切正常）

但是，动画会立即重新启动！我不知道为什么。很明显，它没有再次调用动画函数，因为“EXITED”仍然显示在底部，但我不知道如何才能再次开始动画

有人知道为什么会这样吗？更重要的是，有人知道如何在

mouseleave

之后使动画永久停止吗

---

对于奖励点：有没有办法告诉动画“慢到停止”而不是立即停止？

我认为这是因为你在

之后而不是之前调用
.clearQueue（）
，如果你把它改成另一种方式，它似乎可以工作：

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

要回答您的第一个问题，可以通过将停止功能放在主功能中来解决此问题，如下所示：

$(".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');

$（“.scroller”）.mousemove（函数（e）{
var h=$（“#内部滚动条”）.width（）+1130；
var offset=$（$（this））.offset（）；
var位置=（e.pageX-offset.left）/$（this.width（）；
如果（位置<0.10）{
$（this.animate（{scrollLeft:0}，5000）；
$（“.status”）.html（'Percentage:'+position.toFixed（2）+'lefting'）；
}否则，如果（位置>0.90）{
$（this.animate（{scrollLeft:h}，5000）；
$（“.status”）.html（'Percentage:'+position.toFixed（2）+'righting'）；
}否则{
$（this.stop（）.clearQueue（）；
$（“.status”）.html（'Percentage:'+position.toFixed（2））；
}
$（“.scroller”）.mouseleave（函数（e）{
$（this.stop（）.clearQueue（）；
$（“.status”）.html（'EXITED'）；

}))；
});

这是你的电话号码

.stop（）函数只会突然停止，因此如果您真的想让慢速停止，我会使用类似于中的技术