Barry's jQuery Mobile Tutorial: Transitions


JQuery Mobile provide a selection of transition effects for when we switch pages. We control the transitions by specifying a data-transition attribute in the link definition. For example, if we wish to do a 'flip' transition when linking to a page with id="page2" we could code the following.

<a href="#page2 data-transition="flip">Go to page 2</a>

The only other control of transition is that we can reverse the direction of the transition effect by specifying a data-direction="reverse" attribute. Not all transitions have a visible reverse effect. As an example, we can reverse the above flip transition with the following link definition.

<a href="#page2 data-transition="flip" data-direction="reverse" >Go to page 2</a>

You can test all of the transitions by clicking on the buttons below.

Default Default Reverse
Flip Reverse Flip data-transition="flip"
Pop Pop Reverse data-transition="pop"
Fade Fade Reverse data-transition="fade"
Flow Flow Reverse data-transition="flow"
Slide Slide Reverse data-transition="slide"
SlideFade SlideFade Reverse data-transition="slidefade"
Slide Up Slide Up Reverse data-transition="slideup"
Slide Down Slide Down Reverse data-transition="slidedown"
Turn Turn Reverse data-transition="turn"
None None Reverse data-transition="none"


Example page

go back to Transitions page.

This block is to help see the transition.

Use above link to go back to transition table