javascript - jQuery 性能全屏淡入淡出

Question

我正在尝试创建一个深色叠加层，它会像大多数模态框插件一样淡入淡出。我这样做是因为有一个 <div id="overlay">和以下 CSS:

#overlay {
  background: black;
  display: none;
  opacity: .3;
  z-index: 9999;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
}

我使用 jQuery 为这个#overlay 设置动画:

$('#overlay').fadeIn(400);

然而，这个淡入淡出的性能并不是最佳的。当以 1920x1080 像素的分辨率淡入时，我估计 FPS 约为 10/15。有没有更好的方法让这个动画更流畅？

Answer 1

从 jQuery 1.4.3 版本开始，您可以控制每秒帧数。参见 this关联。使用更高的 FPS 可能会导致整体动画更流畅。

Javascript 动画处理在某些较旧的浏览器 (IE6-7) 上不是很流畅。