Question

当我尝试在setTimeout的帮助下使用jquery移动DIV时，它运行正常并且无缝移动：

setTimeout("moveObject()", 10);

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

它移动就像它在Flash中移动一样，你知道它是无缝的...... 但是setTimeout存在一些问题，它有10毫秒，当浏览器选项卡处于模糊状态时，超时停止并且不能完成它所需的工作。

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

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

在第一个代码中，对象在10ms内移动1px。在第二个代码中，对象在1000毫秒内移动100px。所以我认为这两个代码应该做同样的事情，但他们不会。

第一个代码是无缝移动对象，但第二个代码无缝地移动对象。运动中存在一些腐败现象。

我的问题是：如何无缝移动此对象（不使用超时）？如果我可以设定速度那将是很好的。注意：我没有使用HTML5，所以我正在寻找一个适用于jquery＆amp; amp; amp; amp; amp; HTML

Answer 1

jQuery在内部使用超时来制作动画，没有其他办法可以做到这一点一般情况下，如果您使用Window.requestAnimationFrame中的计时器而不是window.setTimeout，则会获得更好的流量，因为它是为动画构建的，并且具有更高的精度。

你真正应该做的是查看像 GSAP from Greensock 这样的库，或者考虑使用CSS3来制作动画，这样可以在大多数情况下为你提供更加流畅的动画。

另请注意，您正在为函数调用eval，因为您将字符串传递给已评估的setTimeout，您应该只引用函数

setTimeout(moveObject, 10);

和10毫秒是一个非常低的数字，曾经是最低限度，现在HTML5将其设置为4毫秒，但并非所有浏览器都遵循这一点，仅仅几年前大多数浏览器都不能低于50毫秒

Answer 2

正如adeneo所提到的，你应该看看CSS3动画。这是关于MDN关于transition property的一篇非常好的文章。还请看一下在您的情况下应该有用的css变换。

要平滑移动元素，您只需要动态添加下面的类。

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

我汇总了一个小例子，您可以将其作为起点：https://jsfiddle.net/5bo5c8st/3/

Answer 3

此问题的解决方案是：requestAnimationFrame https://gist.github.com/mrdoob/838785