即使条件不满足，Jquery animate 也会执行答案

【问题标题】：Jquery animate executes even if the condition is not satisfied即使条件不满足，Jquery animate 也会执行
【发布时间】：2014-10-23 17:32:36
【问题描述】：

正如有人在my previous question 中建议我的那样，我正在使用 jquery 来进行 div 移动。
现在我希望它在距离左边距 200 像素时停止。
为此，我使用以下代码：

  var timeout = 100;
  var width = 200;
  var height = 500;
  var howmuch = 0;
  function move(before) {
	howmuch = before + 5;
	$("#obj").animate({'marginLeft' : '+=' + howmuch + 'px' } );
	if(howmuch < width){
	    setTimeout(function() {
		move(howmuch)
		}, timeout);
		}
	else{alert('finished');
	}
  }
  setTimeout(function() {
	move(howmuch)
  }, timeout);

  #obj {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div id="obj"></div>

但这不起作用：当框达到 200 像素时，我会收到警报，但它不会停止。
可能是什么问题？

【问题讨论】：

两个 cmets：您应该有 edited 您的其他问题，而不是发布新问题，但如果您打算发布新问题，您应该提供一个链接你的“其他问题”。
@Goodword 感谢您指出这一点，我将链接我的问题，但它不包括那个具体问题，它只是关于如何使用 jquery 移动 div 而不是关于如何使其在到达确定位置时停止。我是否应该编辑旧问题？

标签： javascript jquery html jquery-animate settimeout

【解决方案1】：

问题是 jQuery 的 animate() 需要一定的时间才能完成，并且您不允许一个动画在开始另一个动画之前完成。您也在增加您的保证金增加金额。您不是增加 5 像素，而是增加了之前的保证金金额和额外的 5 像素。要完成您要执行的操作（循环中的多个动画），您需要分配一个回调。在这里摆弄：http://jsfiddle.net/o5d6z7qL/1/

var timeout = 100;
var width = 200;
var height = 500;
var howmuch = 0;
function move(before) {
    howmuch = before + 5;
    $("#obj").animate({ 'marginLeft': '+=5px' }, function () {
        if (howmuch < width) {
            setTimeout(function () {
                move(howmuch)
            }, timeout);
        }
        else {
            alert('finished');
        }
    });


}
setTimeout(function () {
    move(howmuch)
}, timeout);

【讨论】：

【解决方案2】：

我认为你让事情变得有点复杂。只需将您的div 位置设置为relative 并为left 属性设置动画，如下所示：http://jsfiddle.net/x99x70vw/

【讨论】：

感谢您的回答。是否可以使用此设置动画完成所需的时间？

【解决方案3】：

这是因为您的动画在每个循环中递增得更大，而不是像您的意图所暗示的那样递增 5。

$("#obj").animate({'marginLeft' : '+=' + howmuch + 'px' } );

所以第一个循环它移动marginLeft + 5，下一个循环它移动它 + 10 个，总共 15 个，然后再 +15 个，总共 30 个......这样做大约 40 次，你得到一个非常大的数字...尝试只使用一个常量增量器：

$("#obj").animate({'marginLeft' : '+=' + 5 + 'px' } );

另请注意，您以 100 毫秒的速率增加循环重复次数，但实际动画需要更长的时间，因为您没有为其提供持续时间，因此您仍会在它完成动画之前收到警报。

【讨论】：

感谢您的回答，我认为我必须指定左边距的像素数，而不是实际位置。如果我使用您发布的代码，一切正常！

【解决方案4】：

正如其他人所指出的，它比您的示例要容易得多。尽管如此，你的原因是不工作是因为在动画中你每次都添加howMuch，它上升到200。所以你添加到你的LeftMargin +5，+10，+15...+195。如果将所有内容相加，总和为 4000 像素，这就是它停止的地方。正确的动画应该是：

$("#obj").animate({'marginLeft' : '+=' + 5 + 'px' } );

【讨论】：

感谢您的回答，我认为我必须指定左边距的像素数，而不是实际位置。如果我使用您发布的代码，一切正常！

【解决方案5】：

您每次循环都以当前边距递增。

howmuch = before + 5;

在这里计算当前边距，因此更改 animate 以将 marginLeft 设置为 howmuch 而不是使用 howmuch 递增：

$("#obj").animate({'marginLeft' : howmuch + 'px' } );

【讨论】：

感谢您的回答，我认为我必须指定左边距的像素数，而不是实际位置。如果我使用您发布的代码，一切正常！

【解决方案6】：

你不需要超时循环：

var howmuch = 200;
var duration = 4000; // = 200 / 5 * 100 from OP
function move() {
    $("#obj").animate({'marginLeft' : '+=' + howmuch + 'px' }, duration);
}
move();

您的示例似乎没有停止，因为您已经启动了许多动画。

【讨论】：