我如何才能停止工作，并确保标题在我单击时而不是在单击位置时停止

Question

How do I make .stop make the heading stop where I click. 如何使.stop使标题停在我单击的位置。 and not move due to animation. 并且由于动画而无法移动。 only using javascript. 仅使用javascript。 I need the heading to stop where i click but i need to click on the heading to make it stop so i cannot click anywhere and the heading move there then stop, stop when i click where the heading is at. 我需要将标题停在我单击的位置，但我需要单击该标题才能使其停止，因此我无法单击任何位置，然后将标题移动到该位置，然后停止，当我单击标题所在的位置时停止。

<!DOCTYPE html>
<html>

<head>
  <title>Interactive programming</title>
</head>

<body>
  <h1 id="heading" style="position:absolute;">Watch the moving heading!</h1>
  <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
  <script>
    function move() {
      $("h1").animate({
          "left": "+=200px"
        }, "slow")
        .animate({
          "top": "+=200px"
        }, "slow")
        .animate({
          "left": "-=200px"
        }, "slow")
        .animate({
          "top": "-=200px"
        }, "slow", function() {
          setInterval(move(),300)
        });
    }
    setInterval(move(),300)
    //this should stop it
    $("h1").click(function() {
    $("h1").stop();
    })

  </script>

  </body>

</html>

Answer 1

The 'setInterval' will keep running, so you will start a new animation after 300 ms, even though you call 'stop'. “ setInterval”将继续运行，因此即使调用“停止”，您也将在300毫秒后开始播放新动画。

The solution is to asssign 'setInterval' to a var, then you can call 'clearInterval'. 解决方案是将“ setInterval”分配给变量，然后可以调用“ clearInterval”。

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

Now you can can stop the interval: 现在您可以停止间隔：

$("h1").click(function() {
  clearInterval(interval);
  $('h1').stop();
}

我如何才能停止工作，并确保标题在我单击时而不是在单击位置时停止

问题描述

1 个解决方案

解决方案1
0 2016-03-22 13:47:38

我如何才能停止工作，并确保标题在我单击时而不是在单击位置时停止

问题描述

1 个解决方案

解决方案1 0 2016-03-22 13:47:38

解决方案1
0 2016-03-22 13:47:38