使用jQuery的fadeIn还是CSS3动画更好？

Question

使用jQuery的fadeIn还是CSS3动画更好？

11

我正在使用一些PHP和JavaScript创建一个简单的图片库，并试图在图片之间进行淡入淡出的过渡效果。然后我想知道，使用CSS动画是否会影响性能，例如：

@-webkit-keyframes fadeIn {
0%   { opacity: 0; }
100% { opacity: 1; }
}

还有一个jQuery的fadeIn效果。

我想使用fadeIn的回调函数，但我也可以使用CSS和计时器来实现。

这两种方式对于大尺寸图片哪种更好呢？我看不出有什么区别，但好奇是否会影响比较慢的电脑。

- John P

为了更好的跨浏览器兼容性，考虑同时使用此代码的未带前缀和-moz-等版本。 - user2428118

当然，我只是在这里使用WebKit来缩短帖子中的代码。不过还是谢谢你提醒我；p - John P

1

@mgraph - jQuery可能支持IE的淡入淡出效果，但很多时候它看起来很糟糕，因为无论jQuery有多好，它都无法隐藏IE的根本限制。 - Spudley

2个回答

6

我认为在有支持的浏览器下使用CSS动画会更好，对于不支持的浏览器，你应该只将jQuery作为备选方案。正如在http://dev.opera.com/articles/view/css3-vs-jquery-animations中详细解释的那样，他们测试了同时使用CSS和jQuery对300个div进行动画处理，并注意到性能统计数据之间存在巨大差异。

使用CSS动画的统计数据是：

而使用jQuery的统计数据则是：

因此，可以看出性能之间存在很大差异。这是因为浏览器的CSS处理器是用C++编写的，本地代码执行速度非常快，而jQuery（JavaScript）是一种解释性语言，浏览器无法很好地预测JavaScript中接下来会发生什么事件，这限制了浏览器对其进行优化以提高性能。希望这回答了你的问题。

- Raees Iqbal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madara's Ghost · Accepted Answer

如何实现一种具有备用方案的方法？在可能的情况下使用CSS3过渡效果，并使用特性检测库（例如Modernizr）确定用户的浏览器是否支持CSS3过渡效果。

仅当用户的浏览器不支持本地动画时，才应使用jQuery。

本地动画是GPU加速的，会对CPU产生较少的约束，且动画更加流畅。此外，它无需JavaScript支持，也不需要额外的请求来完成。