Page Transitions

Contact Us or call 1-877-932-8228
Page Transitions

Page Transitions

Depending upon the device you are using, you might have noticed a slight fade-in/fade-out effect when transitioning between pages in the last example. By default, jQuery Mobile applies a "fade" transition between Ajax-loaded pages. Pages that aren't loaded via Ajax aren't loaded with an animated transition. The framework offers a variety of page transitions from which to choose:

jQuery Mobile Transitions
Transition Description
fade Cross-fade animation; the default transition
pop New page grows from small to big
flip A rotation animation, spinning on center vertical axis
turn A rotation animation, like a page turn
flow Current page shrinks off to left; new page slides in from right
slidefade New page slides and fades in from right
slide New page slides in from right
slideup New page slides up from bottom
slidedown New page slides down from top

You can override the default (fade) transition for all transitions in the given file by adding a global configuration directive to the head of the file after linking the jQuery JavaScript file but before linking the jQuery Mobile file:

$(document).on("mobileinit", function(){
	$.mobile.defaultPageTransition = 'flow';

You can also specify a particular transition for a given link with the data-transition attribute:

<a href="index.html" data-transition="flip">I will flip</a>

Let's work on these concepts by building out some pages for the Nan & Bob's Online site.