我想要为 5-6 个单独的图像设置动画,以便在单击特定元素后在页面上移动。我想将此动画控制在 1-2 秒以内。
我担心这在不太好的计算机上运行速度有多快。
我想代码看起来像这样,每个图像都有不同的类:
$("#startAnimation").click(function(){
$(".toBeAnimated").animate({
marginLeft: "+=250px",
}, 1000 );
});
大家有什么推荐吗?这会不会太多了?
谢谢!
最佳答案
jQuery 动画的工作方式,动画将始终在您指定的时间内完成。即使在慢速计算机上的非常慢的浏览器中,动画仍然会在所需的时间内完成。
问题在于动画的流畅程度与跳跃程度。在较慢的浏览器/较慢的计算机中,没有足够的 CPU 来显示大量单独的帧并使动画顺利运行,因此它会以更大的步长移动,但它仍然会在所需的时间内完成。
最糟糕的情况是,动画在速度较慢的计算机上出现抖动或跳动。如果您试图避免在动画跳动时显示动画,那么这是一个更大的项目。您必须设计某种运行时测试来测试主机运行动画的能力,如果您发现主机速度较慢,则可以跳过该计算机上的动画。总体思路是运行一些测试动画,这些动画代表您在页面加载时将要执行的操作,并计算您似乎有时间观看的帧数。
经过一些实验,您设置了一些阈值,如果您在测试动画中看到每秒少于 X 帧,则您设置一个 cookie,表明您不应在此计算机上使用动画。您可以将 cookie 设置为几个月后过期,这样您就可以定期重新运行测试,以防主机功能发生变化。在以后的页面访问中,您首先检查 cookie,如果 cookie 存在,则使用 cookie 的测试结果,而不是再次运行测试。
关于jquery - 我想使用 jQuery 在单个页面上为 5-6 个单独的元素制作动画。我担心旧版浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11943338/