jQuery Mobile Transities

jQuery Mobile includes CSS effects that allow you to choose how 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 through form submission 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 forward 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 pop-up 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:Alle effecten ondersteunen tegelijkertijd het omgekeerde effect, bijvoorbeeld, als u wilt dat de pagina van links naar rechts schuift in plaats van van rechts naar links, gebruik dan de waarde "reverse" van het data-direction attribuut. Dit is standaard op de terugknop.

Voorbeeld

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

Probeer het zelf