Question

我有这行代码，但它不起作用，我猜我的功能是这里问题的原因。这是我的JavaScript：

$(document).ready(function () {
    var interval;

    function move(ele) {
        $(ele).animate({
            'background-position-y': '0px'
        }, 200, function () {
            $(ele).animate({
                'background-position-y': '3px'
            }, 200, function () {
                interval = setTimeout(function () {
                    move(ele)
                }, 3);
            });
        });
    };
    $(".up").hover(function () {
        move(this), function () {
            clearTimeout(interval);
            interval = null;
            $(this).css("background-position", "80px 3px ");
        };
    });

有人可以解释一下我在这里做错了吗？

Answer 1

错误，看起来您的实际问题是您只将一个函数传递给hover，而不是两个。您已….hover(function() { move(…), function() { … } })而不是….hover(function() { move(…); }, function() { … })。

将来，如果你养成了不断缩进代码的习惯，这种错误会更容易被发现。

Answer 2

即使有大卫建议的正确关闭括号，仍然存在一个问题，使动画继续进行。清除定时器（间隔）不会停止传递给.animate()的回调函数执行。因此，interval = setTimeout(...)仍然会被执行并使动画循环永久化。

我为一个工作示例重新编写了一些代码，尽管可能会有一些改进（比如摆脱全局变量）。 http://jsfiddle.net/aKKRk/

clearTimeout（）函数外部不能正常工作

2 个答案: