jQuery Mobile Transition
jQuery Mobile includes CSS3 effects that let you choose how the page opens.
jQuery Mobile page switching effects
jQuery Mobile provides various page switching effects to the next page.
Note: In order to achieve the page switching effect, the browser must support CSS3 3D switching:
10.0 | 16.0 | 4.0 | 15.0 |
Transition | Description | Page | Dialog |
---|---|---|---|
fade | Default. Fade to the next page | Try it | Try it |
flip | Flip from back to front | Try it | Try it |
flow | Throw out the current page and go to the next page | Try it Give it a try | |
pop | Go to the next page like a pop-up window. | Try it | Try it |
slide | Slide from right to left to the next page. | Try it | Try it |
slidefade | Slide from right to left and fade to the next page. | Try it | Try it |
slideup | Slide to the next page from bottom to top. | Try it | Try it |
slidedown | Slide from top to bottom to the next page. | Try it | Try it |
turn | Turn to the next page. | Try it | Try it |
none | No transition effect. | Try it | Try it |
##On all links in jQuery Mobile, the fade effect is used by default (if the browser supports it). |
---|
Tips: All the above effects support back 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 a "reverse" value. This is the default on the back button.