jQuery Mobile Transition

jQuery Mobile includes CSS effects that allow you to choose the way a page opens.

jQuery Mobile Transition Effects

jQuery Mobile has a series of effects on how to transition from one page to the next.

Note:To implement transition effects, the browser must support CSS3 3D transformations:

Browser support

  • Internet Explorer 10 supports 3D transformations (earlier versions do not support them)
  • Opera still does not support 3D transformations

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

<a href="#anylink" data-transition="slide">Slide to page two</a>

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

Transition Description Test
fade Default. Fade in and out to the next page. Test
flip Flip from behind to the next page. Test
flow Throw out the current page and introduce the next page. Test
pop Turn to the next page like a popup window. Test
slide Slide from right to left to the next page. Test
slidefade Slide from right to left and fade in to the next page. Test
slideup Slide up from bottom to top to the next page. Test
slidedown Slide down from top to bottom to the next page. Test
turn Turn to the next page. Test
none No transition effect. Test

Tip:In jQuery Mobile, fade-in and fade-out effects are default on all links (if the browser supports them).

Tip:All the above effects support reverse actions at the same time, for example, if you want the page to slide from left to right instead of from right to left, please use the data-direction attribute with the value "reverse". It is the default on the back button.

Example

<a href="#pagetwo" data-transition="slide" data-direction="reverse">Slide</a>

Try It Yourself