Question

我正在尝试使标题在一个正方形中移动并使其成为当我点击标题时，运动停止。所有这一切只使用javascript和JQuery。现在标题显示但它根本没有移动。如果有人知道如何使这项工作请帮助。

<h1 id="heading" style="position:absolute;">Watch the moving heading!</h1>

function move() {
    $("h1").animate({
        "left": "+=200px"
    }, "slow").animate({
        "top": "+=200px"
    }, "slow").animate({
        "left": "-=200px"
    }, "slow").animate({
        "top": "-=200px"
    }, "slow", function() {
        var interval = setInterval(move(), 300);
        interval
    });
}

var setinterval = setInterval(move(), 300);

//this should stop it
$("h1").click(function() {
    clearInterval(interval);
    $('h1').stop();
}

Answer 1

实际上有一堆错误。我将详细介绍它们，但同时这里是正确的代码：

function move() {
    $("h1").animate({
        "left": "+=200px"
    }, "slow").animate({
        "top": "+=200px"
    }, "slow").animate({
        "left": "-=200px"
    }, "slow").animate({
        "top": "-=200px"
    });
}

var interval = setInterval(move, 300);

//this should stop it
$("h1").click(function() {
    clearInterval(interval);
    $(this).stop(true, true);
});

DEMO

所以：

1）在全球范围内声明您的interval变量。如果在函数中声明它，它将无法工作，因为其他函数无法访问它。但这并不重要，因为2）。

2）从setInterval功能中删除move。

3）将对move的引用传递给setInterval，不要将其称为：setInterval(move, 300);

4）观察你的右括号和括号。

5）.stop需要将clearQueue属性设置为true，否则它只会停止队列中的最后一个动画，而且你有很多。

Answer 2

问题（除了不匹配的括号之外）是因为您的setInterval()调用正在堆叠队列上的动画，因此当您实际清除队列时，数千animate()次调用是排队并将完成。

您可以通过递归调用move()并在点击的h1上设置一个标志来更改逻辑，以便根本不需要使用计时器，这将在下一个循环后停止动画。试试这个：

function move() {
    $("h1").animate({
        "left": "+=200px"
    }, "slow").animate({
        "top": "+=200px"
    }, "slow").animate({
        "left": "-=200px"
    }, "slow").animate({
        "top": "-=200px"
    }, "slow", function() {
        !$(this).data('stop') && move();
    });
}

move();

$("h1").click(function() {
    $(this).data('stop', true);
});

Working example

如果需要，您可以使用此模式点击动画上的h1 a切换：

$("h1").click(function() {
    var stop = $(this).data('stop');
    if (stop)
        move();

    $(this).data('stop', !stop);
});

Working example

代码将无法运行。 clearInterval在一个正方形中移动标题

2 个答案: