jQuery Mobile incluye efectos CSS3 que permite elegir la manera en una página debe abrirse.
jQuery Mobile efectos de transición
jQuery Mobile tiene una variedad de efectos de cómo pasar de una página a la siguiente.
Nota: Para lograr el efecto de transición, el navegador debe ser compatible con CSS3 3D Transforma:
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con las transformadas en 3D.
El efecto de transición se puede aplicar a cualquier presentación vínculo o formulario utilizando el atributo de transición de datos:
<a href="#anylink" data-transition="slide" >Slide to Page Two</a>
La siguiente tabla muestra las transiciones disponibles que se pueden utilizar con el atributo de transición de datos para ambas páginas y cuadros de diálogo:
| Transición | Descripción | para Páginas | para Diálogos |
|---|---|---|---|
| fade | Defecto. Se desvanece a la página siguiente | Intentalo | Intentalo |
| flip | Voltea a la siguiente página de atrás hacia adelante | Intentalo | Intentalo |
| flow | Lanza la página actual de distancia y se presenta en la página siguiente | Intentalo | Intentalo |
| pop | Va a la página siguiente como una ventana emergente | Intentalo | Intentalo |
| slide | Diapositivas a la página siguiente de derecha a izquierda | Intentalo | Intentalo |
| slidefade | Diapositivas de derecha a izquierda y se desvanece en la página siguiente | Intentalo | Intentalo |
| slideup | Diapositivas a la página siguiente de abajo hacia arriba | Intentalo | Intentalo |
| slidedown | Diapositivas a la siguiente página de arriba a abajo | Intentalo | Intentalo |
| turn | Se vuelve a la página siguiente | Intentalo | Intentalo |
| none | Sin efecto de transición | Intentalo | Intentalo |
El efecto de atenuación es por defecto en todos los eslabones de jQuery Mobile (si el soporte de los navegadores ella).
Consejo: Todos los efectos anteriores también apoya acciones inversa / hacia atrás, por ejemplo, si desea que la página se deslice de izquierda a derecha, en vez de derecha a izquierda, utilice el atributo de dirección de los datos con el valor "reverse" .
Ejemplo
<a href="#pagetwo" data-transition="slide"
data-direction="reverse" >Slide</a> Inténtalo tú mismo "