YouTip

# jQuery Mobile Transitions * * * jQuery Mobile includes CSS3 effects that let you choose how pages open. * * * ## jQuery Mobile Page Transition Effects jQuery Mobile provides various effects for transitioning from one page to the next. **Note:** To implement page transitions, the browser must support CSS3 3D transitions: | | | | | | | --- | --- | --- | --- | --- | | 12.0 | 10.0 | 16.0 | 4.0 | 15.0 | The numbers in the table are the minimum browser versions that support 3D rotation. Page transitions can be applied to any link or form submission that uses the `data-transition` attribute: Go to the second page The table below shows the available page transitions when using the `data-transition` attribute: | Transition | Description | Page | Dialog | | --- | --- | --- | --- | | fade | Default. Fades into the next page. | (#) | (#) | | flip | Flips from back to front to the next page. | (#) | (#) | | flow | Throws the current page, enters the next page. | (#) | (#) | | pop | Goes to the next page like a pop-up window. | (#) | (#) | | slide | Slides from right to left to the next page. | (#) | (#) | | slidefade | Slides from right to left and fades into the next page. | (#) | (#) | | slideup | Slides from bottom to top to the next page. | (#) | (#) | | slidedown | Slides from top to bottom to the next page. | (#) | (#) | | turn | Turns to the next page. | (#) | (#) | | none | No transition effect. | (#) | (#) | |  | In jQuery Mobile, the fade effect is used by default on all links (if the browser supports it). | | --- | **Tip:** All the effects above 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 the value "reverse". This is the default on the back button. ## Example Switch [Try it »](#)