Transitions

Home

Page transitions

The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.

To set a custom transition effect, add the data-transition attribute to the link. Possible values include:

<a href="index.html" data-transition="pop">I'll pop</a>

slide slideup slidedown pop fade flip

In addition, you can also force a "backwards" transition by specifying data-direction="reverse" on your link. Note: (this was formerly data-back="true", which will remain supported until 1.0)

Transitions from jQtouch (with small modifications): Built by David Kaneda and maintained by Jonathan Stark.