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.