jQuery Mobile Transitions

## jQ Mobile Tutorial

jQ Mobile HOME jQ Mobile Intro jQ Mobile Install jQ Mobile Pages jQ Mobile Transitions jQ Mobile Buttons jQ Mobile Icons jQ Mobile Toolbars jQ Mobile Navbars jQ Mobile Collapsibles jQ Mobile Grids

## jQ Mobile Lists

jQ Mobile List Views jQ Mobile List Content

## jQ Mobile Forms

jQ Mobile Form Basic jQ Mobile Form Inputs jQ Mobile Form Select jQ Mobile Form Sliders

## jQ Mobile Themes

jQ Mobile Themes

## jQ Mobile Events

jQ Mobile Events jQ Mobile Touch jQ Mobile Scroll jQ Mobile Orientation jQ Mobile Page Events

## Examples

jQ Mobile Examples

## References

jQ Data Attributes jQ Events jQ Icons

# jQuery Mobile Transitions

« Previous
Next Chapter »

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:

Browser Support

- Internet Explorer 10 supports 3D transforms (earlier versions do not)
- Opera does not yet support 3D transforms

The transition effects can be applied to any link or form submission by using the data-transition attribute:

<a href="#anylink" data-transition="slide">Slide to Page Two</a>

The table below shows available transitions that can be used with the data-transition attribute:

Transition | Description | Try it
--- | --- | ---
fade | Default. Fades to the next page | Try it
flip | Flips to the next page from back to front | Try it
flow | Throws the current page away and comes in with the next page | Try it
pop | Goes to the next page like a popup window | Try it
slide | Slides to the next page from right to left | Try it
slidefade | Slides from right to left and fades in the next page | Try it
slideup | Slides to the next page from bottom to top | Try it
slidedown | Slides to the next page from top to bottom | Try it
turn | Turns to the next page | Try it
none | No transition effect | 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 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". This is default on Back buttons.

## Example

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>
Try it yourself »
« Previous
Next Chapter »

## Your suggestion:

Your E-mail (optional):

Page address:

Description:

Close [X]

## Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

## WEB HOSTING

Best Web Hosting UK Reseller Hosting Wow! $5 SSD Hosting

## WEB BUILDING

Download XML Editor
FREE Website BUILDER FREE Website Creator

## WEB RESOURCES

Web Statistics Web Validation

## SHARE THIS PAGE