Javascript 哪个更好：Jquery.animate（）还是带有setTimeOut的css转换

可能重复：

我正在尝试做一个动画，速度是很重要的。我试过两种方法，两种都有效，但我想知道哪一种更有效

方法1：使用Jquery.animate（） 我的代码看起来像：

$("div").animate({opacity: "show"}, 100, "linear", function() {
    console.log("Animation Complete");
});

方法2：使用带有setTimeOut的Css转换： 这是代码的样子：

$("div").addClass("hidden") //On Page load

然后，要设置淡入动画，请执行以下操作：

setTimeout(function () {
    $("div").removeClass('hidden');
}, 100);

“隐藏”具有以下样式属性：

.hidden { opacity: 0 !important; }

---

两者都很好，但我想知道哪一个更有效/更好。

使用转换，除非JavaScript动画提供了转换没有的东西

转换是在浏览器级别实现的，在某些情况下是硬件加速的，因此它们通常应该尽可能快

---

此外，代码要简单得多。

动画效果更好。

setTimeout（）

在一段时间后立即删除css类，但是

animate

会逐渐淡入/淡出。

如果淡出时间超过100ms，使用jquery动画将有助于您。

过渡性能更好，因为它们是在浏览器中本机实现的，并且经常使用硬件加速。请参阅at的博客。默认情况下使用转换。如有必要，仅将jQuery用作旧浏览器的后备方案

---

对CSS转换和性能（包括硬件加速）进行了很好的讨论。

动画方法可能更易于维护（所有代码都在一个位置），但是在低功耗环境（移动/平板电脑）中，转换可能提供更好的性能。不要使用

！重要信息

。让你的选择器更强大。不幸的是，我自己无法添加答案，因为这个问题已经结束，但经过深入分析，动画方法更好。为什么？要真正理解这一点，我们需要记住Javascript在单个线程上运行。调用setTimeout时，它会在该持续时间内阻塞线程，即使是100毫秒，因为每纳秒的效率都很重要。animate方法（在检查jquery源代码后）是通过使用“ticker”实现的，它基本上是一个计数器，用于检查激活日期时间与当前日期时间之间的差异。从上面的注释继续，在代码中使用ticker实现可以使（顺便说一句，异步ajax调用就是这样实现的）。因此，即使浏览器能够更快地呈现css转换，代码本身也会在setTimeOut块中被阻止。而在animate实现中，不会发生这种阻止。我不同意你的看法，@gilly3.“隐藏”类必须能够放置在任何元素上，元素上可能已经有任意强的选择器。虽然“！important”通常是代码味道，但这是修饰符的正确用法。