我想用jQuery在单个页面上为5-6个单独的元素制作动画。我担心旧的浏览器

Question

一旦点击了特定元素，我想动画5-6个单独的图像在页面上移动。我想在1-2秒内保持这个动画。

我担心这会在不太好的计算机上运行得多快。

我想代码看起来像这样，每个图像都有不同的类：

$("#startAnimation").click(function(){
$(".toBeAnimated").animate({ 
    marginLeft: "+=250px",
}, 1000 );
});

你们有什么建议吗？这会是太多了吗？

谢谢！

Answer 1

jQuery动画的工作方式，动画将始终在您指定的时间内完成。即使在慢速计算机上的浏览器非常慢，动画仍将在所需的时间内完成。

问题在于动画出现的平滑程度与动画的跳跃程度。在较慢的浏览器/较慢的计算机中，没有足够的CPU来显示大量单独的帧并使动画平稳运行，因此它以更大的步进移动，但它仍然在所需的时间内完成。

最糟糕的情况是，在较慢的计算机上动画生涩或跳跃。如果你试图避免在跳动时显示动画，那么这是一个更大的项目。您必须设计某种运行时测试来测试主机运行动画的功能，如果您发现主机速度较慢，则跳过该计算机上的动画。一般的想法是，您运行一些测试动画，它代表您在页面加载时将要执行的操作，并计算您似乎有时间的帧数。

经过一些实验，您设置了一个阈值，如果您在测试动画中看到每秒少于X帧，则设置一个不应在此计算机上使用动画的cookie。您可以在几个月内将Cookie设置为过期，以便在主机功能发生变化时定期重新运行测试。在将来的页面访问中，首先检查cookie，如果cookie存在，则使用cookie中的测试结果，而不是再次运行测试。