jQuery Mobile-Übergänge

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 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

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

Hinweis:Alle oben genannten Effekte unterstützen gleichzeitig die umgekehrte Aktion, z.B. wenn Sie möchten, dass die Seite von links nach rechts gleitet, anstatt von rechts nach links, verwenden Sie das Attribut data-direction mit dem Wert "reverse".

Beispiel

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

Versuchen Sie es selbst