Question

有人在my previous question告诉我，我使用jquery进行div移动。
现在我希望它从左边距到达200像素时停止为此，我使用以下代码：

＆＃13;

  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);

＆＃13;

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

＆＃13;

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

＆＃13;

但那不起作用：当盒子达到200px时我收到警报，但它没有停止。
可能是什么问题？

Answer 1

问题在于jQuery的animate()需要一定的时间才能完成，而你在启动另一个动画之前不允许完成一个动画。您还在增加保证金增加额。而不是增加5px，而是增加先前的保证金金额和额外的5px。要完成您要执行的操作（循环中的多个动画），您需要分配回调。在这里小提琴：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);

Answer 2

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

Answer 3

您不需要超时循环：

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

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

Answer 4

这是因为你的动画在每个循环中递增得更大，而不是像你想要的那样递增5的常量。

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

首先循环它移动marginLeft + 5，下一个循环移动它+ 10个以上总共15个，然后再多+15个再移动总共30个...这样做大约40次并且你得到一个非常大的数字......试着改用恒定的增量器：

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

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

Answer 5

正如其他人所指出的，它比你的例子容易得多。尽管如此，你的原因是因为在动画中你每次都会添加多少，最多可达200.所以你要添加到你的LeftMargin + 5，+ 10，+ 15 ...... + 195。如果你加上所有它总计最多4000 px，这是它停止的地方。正确的动画将是：

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

Answer 6

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

howmuch = before + 5;

这里你计算当前的保证金，所以改变动画来设置marginLeft到多少而不是增加多少：

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

即使条件不满足，也会执行Jquery动画

6 个答案: