Alternatives to jQuery Mobile animations

Problem

I'm currently using Phonegap to make an app with jQuery Mobile and as such the use of the .fadein() .fadeout(), .hide() and show() functions don't work as well as I have hoped are there any alternatives to these functions? I've been reading up on using CSS3 is better for animations as its hardware accelerated but I write this post in hope that there is perhaps a better way of achieving animations on Phonegap or is CSS3 the best?

Problem courtesy of: user481610

Solution

Check out Steroids.js which bridges The Performance Gap Between PhoneGap And Native Apps By Using Native UI Components And Animations

Check the following documentations to get started

http://techcrunch.com/2013/08/20/steroids-js-bridges-the-performance-gap-between-phonegap-and-native-apps-by-using-native-ui-components-and-animations/

http://www.marketwire.com/press-release/appgyver-steroidsjs-closes-the-performance-gap-between-html5-and-native-apps-1823040.htm

Solution courtesy of: ᴀʀᴜn BᴇrtiL

Discussion

JS animations are slow, for a multiplatform app (web mobile, android, iphone) I would look into CSS 3D transitions. CSS 3D transitions are hardware accelerated, and you can do preatty neat stuff.

Heres an example: http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/

Discussion courtesy of: Macario

This recipe can be found in it's original form on Stack Over Flow.