Jquery Mouseout停止该功能

我又来了：D

我尝试在鼠标移出时使用.stop（）停止函数，但不起作用

        function loop(){
        $('.slider').stop().animate({"left": "-=50"},600,loop);
    };

    $('.botao-dir').mouseover(function(){
        .loop();
    });

我想做的是当我的鼠标在（.botao dir）上方时，divs为样式添加“-50 left”，当我的鼠标离开时，动画就停止了

有一种方法可以把最大值加到左边

示例：当我的div左移“-500”时，动画就停止了

---

谢谢大家!

在

-500px

处的一个方法是在循环中添加一个检查

function loop() {
    if (parseInt($('.slider').css("left"), 10) > -500 ||
        $('.slider').css("left") == "auto") {
        $('.slider').animate({
            "left": "-=50"
        }, 600, loop);
    }
    console.log($('.slider').css("left"));
};

$('.botao-dir').mouseover(function () {
    loop();
});

---

简单的例子：

以下是基于此的答案

基本上，在循环之前检查鼠标是否仍悬停在元素上

---

您在JSFIDLE中的示例不起作用。我可以限制添加left，但事件mouseout我不能。CSS设置不正确，但代码确实有效。检查控制台以进行验证。我建议您自己集成逻辑来验证。@user2154508我更新了工作示例，以便CSS与代码一起工作。再看一眼：

if ((parseInt($('.slider').css("left"), 10) > -500 ||
    $('.slider').css("left") == "auto") &&
    ($('.botao-dir').is(":hover"))) {
    $('.slider').animate({
        "left": "-=50"
    }, 600, loop);
}