jQuery Mobile Transitions
jQuery Mobile includes CSS3 effects that lets you choose the way a page should open.
jQuery Mobile Transition Effects
jQuery Mobile has a variety of effects for how to transition from one page to the next.
Note: To achieve the transition effect, the browser must support CSS3 3D Transforms:
- Internet Explorer 10 and 11 supports 3D transforms (earlier versions do not)
- Opera version 15 and higher support 3D transforms (earlier versions do not)
The transition effects can be applied to any link or form submission by using the data-transition attribute:
The table below shows available transitions that can be used with the data-transition attribute for both pages and dialogs:
|Transition||Description||For Pages||For Dialogs|
|fade||Default. Fades to the next page||Try it||Try it|
|flip||Flips to the next page from back to front||Try it||Try it|
|flow||Throws the current page away and comes in with the next page||Try it||Try it|
|pop||Goes to the next page like a popup window||Try it||Try it|
|slide||Slides to the next page from right to left||Try it||Try it|
|slidefade||Slides from right to left and fades in the next page||Try it||Try it|
|slideup||Slides to the next page from bottom to top||Try it||Try it|
|slidedown||Slides to the next page from top to bottom||Try it||Try it|
|turn||Turns to the next page||Try it||Try it|
|none||No transition effect||Try it||Try it|
|The fading effect is default on all links in jQuery Mobile (if the browser support it).|
Tip: All effects above also support reverse/backward actions, e.g. if you want the page to slide from left to right, instead of right to left, use the data-direction attribute with value "reverse".
Try it yourself »
Thank You For Helping Us!
Your message has been sent to W3Schools.