jQuery Mobile Transitions
jQuery Mobile includes CSS3 effects that let you choose the way 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 indicate 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="../index.html" data-transition="slide">切换到第二个页面</a>
The table below shows the page transitions available by using the data-transition attribute:
| Transition | Description | Page | Dialog |
|---|---|---|---|
| fade | Default. Fade in to the next page | Try it | Try it |
| flip | Flip from back to front to the next page | Try it | Try it |
| flow | Pop out the current page and enter the next page | Try it | Try it |
| pop | Go to the next page like a popup window. | Try it | Try it |
| slide | Slide to the next page from right to left. | Try it | Try it |
| slidefade | Slide from right to left and fade in to the next page. | Try it | Try it |
| slideup | Slide to the next page from bottom to top. | Try it | Try it |
| slidedown | Slide to the next page from top to bottom. | Try it | Try it |
| turn | Turn to the next page. | Try it | Try it |
| none | No transition effect. | Try it | Try it |
 |
In jQuery Mobile, all links use the fade transition by default (if the browser supports it). |
|---|
Tip:All the above effects support back behavior. For example, if you want the page to slide from left to right instead of from right to left, use the data-direction attribute with a value of "reverse". This is the default on back buttons.
Example
Try it »