Transizione jQuery Mobile

jQuery Mobile includes CSS effects that allow you to choose how pages open.

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

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

Suggerimento:Tutti gli effetti supportano contemporaneamente l'azione inversa, ad esempio, se desideri che la pagina scorra da sinistra a destra invece che da destra a sinistra, usa l'attributo data-direction con valore "reverse". È il valore predefinito sul pulsante di ritorno.

Esempio

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

Prova personalmente