1

可能重复：
使用 jQuery fadeIn 或 CSS3 动画更好吗？
什么更快？CSS3 过渡还是 jQuery 动画？

我正在尝试制作动画，速度至关重要。我尝试了两种方法，这两种方法都有效，但是我想知道哪种方法更有效。

方法 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 具有以下样式属性：

.hidden { opacity: 0 !important; }

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

4

4 回答 4

2

除非 JavaScript 动画为您提供过渡不提供的东西，否则请使用过渡。

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

此外，代码要简单得多。

于 2013-01-22T19:46:34.483 回答
1

过渡效果要好得多，因为它们是在浏览器中本地实现的，并且经常使用硬件加速。在Rich Bradshaw的博客中查看这个 jQuery animate 与 CSS 过渡性能比较演示。默认使用过渡。如有必要，仅使用 jQuery 作为旧浏览器的后备。

这篇文章很好地讨论了 CSS 过渡和性能，包括硬件加速。

于 2013-01-22T19:51:58.980 回答
0

动画对此更好。setTimeout()一段时间后立即删除 css 类，但animate逐渐淡入/淡出。

于 2013-01-22T19:47:08.193 回答
0

如果您的淡出时间超过 100 毫秒，使用 jquery 动画将对您有所帮助。

于 2013-01-22T19:50:43.490 回答