动画间隔

Question

我使用Interval和Animate左右移动了一个正方形。 我无法理解如何阻止Interval可能有人可以帮助我。 这是代码。

$(document).ready(function () {
    var Right = true;
    var div = $("div");
    var Inter;

    $("#Start").click(function () {
        Inter = setInterval(function () {
            if (Right) {
                Right = false;
                div.animate({
                    left: '900px'
                }, "slow")
            } else {
                Right = true;
                div.animate({
                    left: '0px'
                }, "slow")
             }
      });
   });

   $("#Stop").click(function () {
    clearInterval(Inter);
   });
});

Answer 1

您需要使用setInterval指定时间间隔。没有它，您的间隔将不会被定义，因为浏览器通常具有最小和强制间隔要求。例如：

$(document).ready(function() {
    var Right = true;
    var div = $("div");
    var Inter;

    $("#Start").click(function() {
      Inter = setInterval(function() {
        if(Right) {
            Right = false;
            div.animate({left:'900px'},"slow");
        } else {
            Right = true;
            div.animate({left:'0px'},"slow");
        }
      }, 500);
    });

    $("#Stop").click(function() {
        clearInterval(Inter);
    };
});

或者，如评论中所述，您可以使用div.stop()停止动画;这看起来像这样：

$("#Start").click(function() {
  if(Right) {
      Right = false;
      div.animate({left:'900px'},"slow");
  } else {
      Right = true;
      div.animate({left:'0px'},"slow");
  }
});

$("#Stop").click(function() {
    div.stop();
};