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