O'Reilly logo

jQuery Mobile Cookbook by Chetan K Jain

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Using CSS to create a bouncing page transition

As you navigate between the pages of your app, the jQuery Mobile framework uses CSS3 animations to show some cool transition effects. The fade transition is used by default for pages, and the pop transition is used for dialogs. You can navigate into a page with a particular transition, and when you navigate out of the page, you can reverse the direction of the transition. jQuery Mobile comes with a default set of 10 transitions as of v1.1.1. The jQuery Mobile online docs has a nice online demo showing all the available transitions. But that's not all; you can use CSS to create your own custom transitions and use them in your app. This recipe shows you how to use CSS and create a bouncing page effect ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required