使用Javascript无缝移动HTML对象

当我尝试在setTimeout的帮助下使用jquery移动DIV时，它工作正常，并且无缝移动，如下所示：

setTimeout("moveObject()", 10);

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

它的移动就像它在闪光中移动一样，你知道的。。 但是setTimeout有一些问题，它有10毫秒，当浏览器选项卡处于模糊状态时，超时会停止，并且不会使作业必须完成

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

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

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

第一个代码是无缝移动对象，但第二个代码不是那么无缝。这场运动中有一些腐败现象

我的问题是：如何无缝地移动这个对象（不使用超时）？如果我能设定一个速度，那就太好了。

---

注意：我没有使用HTML5，所以我正在寻找一种与jquery一起工作的解决方案&HTML

jquery在内部使用超时来制作动画，没有其他方法可以做到这一点。
通常，如果使用中的计时器而不是

window.setTimeout

，可以获得更好的流量，因为它是为动画而构建的，并且具有更高的精度

你真正应该做的是查看像<强> <强>之类的库，或者考虑使用CSS3作为动画，这将给你提供一个更流畅的动画。 还请注意，当您将字符串传递给要计算的setTimeout时，实际上是在调用函数

eval

，您应该只引用该函数

setTimeout(moveObject, 10);

---

10毫秒是一个非常低的数字，过去是绝对最小值，现在HTML5将其设置为4ms，但并不是所有浏览器都这样，仅仅几年前，大多数浏览器都不能低于50ms。

正如adeneo提到的，你应该看看CSS3动画。这里有一篇关于MDN的非常好的文章。还请看一下css转换，它在您的案例中应该很有用

要平滑地移动元素，您只需要动态地将下面的类添加到元素中

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

---

我把一个小例子放在一起，你可以用它作为起点：

这个问题的解决方案是：requestAnimationFrame

---

在jQuery UI中包含了不同的内容，也许这会对您有所帮助。我觉得它非常流畅。您可以使用velocity.js是的，我会检查velocity.js，谢谢VijayHuey，当我对这两个进行交叉检查时，在移动方面有一些不同。谢谢你的回答，css3的动画看起来也不错。他们说：“你不需要在动画中使用Flash”是的，CSS3通常是非常平滑的，但可能有点复杂，并且不是所有的事情都是可能的。据说GSAP和CSS3一样好，而且在某些情况下比CSS3更好，但我对此不太确定。两者都比jQuery好，而且可能比您自己不用花很多时间就可以做的要好得多。是的，CSS3转换/转换似乎是解决方案。这很有效。