jQuery performance fullscreen fade

I am trying to create a dark overlay which fades in just like most modal-box plugins. I do so by having a <div id="overlay"> and the following CSS:

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

I animate this #overlay using jQuery:

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

The performance of this fadein however is not optimal. When fading in at a r开发者_开发知识库esolution of 1920x1080 pixels I would estimate an FPS of about 10/15. Is there a better way to make this animation go more smooth?

You can control the frames-per-second as of version jQuery 1.4.3. See this link. Playing around with a higher FPS may cause an overall smoother animation.

Javascript animation processing is not very smooth on some of the older browsers (IE6-7).

What about using low-level .animate() function? It might be better..