Force jquery to use css3 for its effects

Question

Is it possible to force jquery use CSS3 transitions for its fadeIn fadeOut effects?

It's a mobile only site so I'd like to squeeze as much performance as possible out of it.

Answer 1

First Google result is the jQuery animate enhanced plugin.

Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+

Properties supported: (more to come)

• left/right : using translate(x, y) or translate3d(x, y, z)
• top/bottom : using translate(x, y) or translate3d(x, y, z)
• opacity
• width
• height

According to this page, you should set the plugin's useTranslate3d option to true for smoother (hardware-accelerated) animation on iDevices.

Answer 2

I don't believe jQuery natively supports CSS3 transitions. There are a couple of plugins you can get which will do it for you, but I think they pretty much all fall back to using JS if CSS3 isn't available.

Browser detection may (unfortunately) be your friend here.