jquery - 我想用 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 中的测试结果，而不是再次运行测试。