使用Javascript无缝移动HTML对象

Question

当我试图在setTimeout的帮助下使用jquery移动一个DIV时，它工作得很好，并且无缝地移动，如下所示：

setTimeout("moveObject()", 10);

function moveObject() {
     $('.object').css("left", parseInt($('#object').css("left")) + 1);
}

它在移动就像它在闪存中移动，你知道的。但是setTimeout有一些问题，它有10毫秒，当浏览器选项卡模糊时，超时就停止了，并且没有完成它必须做的工作。

因此，我认为使用JQuery动画来处理这个问题是个好主意。我已将代码更改为：

$("#object").animate({left: parseInt($('#object').css("left")) + 100}, 1000, "linear", function() {} );

在第一个代码中，对象在10 is内移动1px。在第二个代码中，对象在1000 is内移动100 is。所以我认为这两种密码应该是一样的，但它们不是。

第一种代码是无缝地移动对象，但第二种代码不是无缝的。运动中有一些腐败现象。

我的问题是:我如何能够无缝地移动这个对象(不使用超时)？如果我能设定一个速度，那就太好了。注意:我不使用HTML5，所以我正在寻找一种与jquery & HTML一起工作的解决方案。

Answer 1

这个问题的解决方案是:request动画框架https://gist.github.com/mrdoob/838785

Answer 2

jQuery在内部使用超时来动画，没有其他方法可以做到这一点。

通常，如果您使用Window.requestAnimationFrame中的计时器而不是window.setTimeout中的计时器，您会得到更好的流，因为它是为动画而构建的，并且具有更高的精度。

您真正应该做的是查看像GSAP来自Greensock这样的库，或者考虑在动画中使用CSS3，这将在大多数情况下给您提供一个更流畅的动画。

还请注意，当您将字符串传递给正在计算的eval时，您实际上是在函数上调用setTimeout，您应该只引用该函数

setTimeout(moveObject, 10);

而10毫秒是一个非常低的数字，这曾经是绝对最小的，现在HTML5将它设置为4ms，但并不是所有的浏览器都遵循这一点，就在几年前，大多数浏览器不能低于50 is。

Answer 3

正如adeneo所提到的，您应该看看CSS3动画。这里有一篇关于过渡性质的非常好的关于MDN的文章。还请看一下css转换，这在您的情况下应该是有用的。

要顺利地移动元素，只需将以下类动态添加到元素中。

.move-right {
  transform: translate3d(100px, 0px, 0px);
  transition: all 1s linear;
}

我已经列出了一个小示例，您可以使用它作为起点：https://jsfiddle.net/5bo5c8st/3/