jQuery Mobile에서는 6개의 페이지 전환 효과가 지원된다. 원하는 효과를 지정하려면 data-transition 속성을 지정한다. 기본적으로는 페이지 전환시에 오른쪽에서 왼쪽으로 slide 효과가 적용되며, data-direction="reverse"를 지정하면 전환 방향을 반대로 할 수 있다.
<p><a
href="#second_page" data-transition="slide">Slide</a>,
<a href="#second_page" data-transition="slide"
data-direction="reverse">Slide,
reverse</a></p>
<p><a href="#second_page"
data-transition="slideup">Slide
Up</a>,
<a href="#second_page"
data-transition="slideup"
data-direction="reverse">Slide Up,
reverse</a></p>
<p><a href="#second_page"
data-transition="slidedown">Slide
Down</a>,
<a href="#second_page"
data-transition="slidedown"
data-direction="reverse">Slide Down,
reverse</a></p>
<p><a href="#second_page"
data-transition="pop">Pop</a>,
<a href="#second_page" data-transition="pop"
data-direction="reverse">Pop,
reverse</a></p>
<p><a href="#second_page"
data-transition="fade">Fade</a>,
<a href="#second_page" data-transition="fade"
data-direction="reverse">Fade,
reverse</a></p>
<p><a href="#second_page"
data-transition="flip">Flip</a>,
<a href="#second_page" data-transition="flip"
data-direction="reverse">Flip, reverse</a></p>
slide
slideup
slidedown
pop
fade
flip
페이지 전환 설정의 기본 값을 변경하려면 다음의 설정을 이용한다.
$.mobile.defaultPageTransition
= "slide"
$.mobile.defaultDialogTransition = "pop"
