jquery - 更流畅的 Jquery 动画

Question

关于这个有另一个线程，但它没有解决可能是因为我的问题不是很清楚。

只是想再试一次，希望我能尽快解决这个问题:

我最近的任务是创建一个模拟基本 Flash 动画的单页网站，即滑入、淡入和淡出元素。

当我得到一个交互式模型时，我遇到了一个大问题 - 断断续续的动画。该问题出现在屏幕大于 18 英寸的 Mac 中，无论浏览器如何，以及小于 18 英寸的 Mac 仅特定于 FF 版本 3 及以下版本。在 PC 上，动画几乎完美无缺。

这是我的 jquery 代码，受影响的元素标有 ID #md1、#md2 和 #md3:

$(document).ready(function () {
    $('#md1').animate({ top: "-60px" }, 500);
    $('#md2').animate({ top: "60px" }, 800);
    $('#md3').animate({ left: "60px" }, 1000);
    $('.home').fadeTo(3000, 0.8);
    $('#bg-img-4').fadeTo(1200, 1);
    $('#menu').fadeTo(4000, 1);
    $('#copyright').fadeTo(4000, 1);
});

我采用了各种优化方法，包括在索引页面上缓存受影响的 div 中存在的图像，稍后将用户重定向到实际页面，并对动画进行排队，但没有任何效果。

这真的很令人沮丧，因为我似乎已经用尽了我所知道的所有可用方法，但我似乎无法让它在 Mac 上正常运行。

我有一种直觉，我在 document ready 上编译了太多动画，这导致了缓慢 - 谁能确认这是否是主要原因，以及是否有任何其他方法可以解决这个问题？

非常感谢你们的帮助。非常感谢 =)

Answer 1

最好的方法是为此使用 CSS 转换/动画。如果某些浏览器不支持它们，则此类浏览器不适用于任何类型的动画。

CSS 中的过渡和动画可以通过 native 代码进行更好的优化，因此理论上可能会表现出更流畅(更高的 FPS)行为。

从上面的 jquery 动画开始:

1. 尝试减少复杂元素上的 fadeTo 数量。
2. 尝试简化样式 - 减少 opacity 或 rgba() 透明度的用例数量。

一般来说:DOM 元素越少越好。