Question

我又来了：D

我尝试使用.stop（）在mouseout时停止我的功能，但不起作用。

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

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

我想做的是当我的鼠标位于（.botao-dir）时，div为样式添加“-50 left”，当我的鼠标停止时，动画就停止了。

还有一种方法可以将最大值添加到左边？

示例：当我的div获得“-500 left”时，动画就会停止。

谢谢大家！

Answer 1

在-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();
});

简单示例：http://jsfiddle.net/4hzyG/1/

Answer 2

以下是基于此answer的答案。

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

jsfiddle example

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

Mouseout停止该功能

2 个答案: