Question

Jquery Mobile Transition effects have a clumsy behavior in Android PhoneGap app.The same transitions are smooth in IPhone PhoneGap app.

$.mobile.changePage( "index.html", { transition: "fade"} );
$.mobile.changePage( "index.html", { transition: "slideup"} );

Any workaround to achieve the same smooth page transitions as Iphone on android.

Answer 1

According to Todd Parker on the jQuery Mobile blog, android transitions have issues:

JQuery Mobile Blog
We did a ton of work leading up to 1.0 to make our transitions as smooth as possible, but there were two significant constraints that we couldn’t avoid: the need to scroll the viewport between transitions and Android’s poor animation performance. In 1.1, we’ve embraced theses contraints and have come up with new animation sequence that effectively hides the page scrolling, completely re-designed the loading spinner to be visually unobtrusive, sped up the overall transition timing, added support for Firefox animations, and changed the default page transition to a fast and smooth fade out/in animation instead of slide. After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.

---

It looks like your issue may be resolved with v1.1 coming out mid to late February. For now, stick with fade, or none at all.

http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/