jQuery Mobile Transitions
jQuery Mobile includes CSS3 effects that allow you to choose how pages open.
jQuery Mobile Page Transition Effects
jQuery Mobile provides various effects for transitioning to the next page.
Note: To achieve page transition effects, the browser must support CSS3 3D transitions:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
The numbers in the table represent the minimum browser version that supports 3D rotation.
Page transition effects can be applied to any link or form using the data-transition attribute:
Page transition effects can be applied to any link or form submission using the data-transition attribute:
<a href="#anylink" data-transition="slide">Switch to the second page</a>
The following table shows the available page transitions when using the data-transition attribute:
| Transition | Description | Page | Dialog |
|---|---|---|---|
| fade | Default. Fades into the next page | Try it | Try it |
| flip | Flips from back to front to the next page | Try it | Try it |
| flow | Throws the current page and enters the next page | Try it | Try it |
| pop | Transitions to the next page like a pop-up window | Try it | Try it |
| slide | Slides from right to left to the next page | Try it | Try it |
| slidefade | Slides from right to left and fades into the next page | Try it | Try it |
| slideup | Slides from bottom to top to the next page | Try it | Try it |
| slidedown | Slides from top to bottom to the next page | Try it | Try it |
| turn | Turns to the next page | Try it | Try it |
| none | No transition effect | Try it | Try it |
| | On all links in jQuery Mobile, the default effect is fade in and out (if the browser supports it). | | --- | --- |
Tip: All the above effects support backward behavior. For example, if you want the page to slide from left to right instead of right to left, use the data-direction attribute with the "reverse" value. This is the default on back buttons.