jQuery Mobile - Transitions

It allows to change property values which occurs over specified duration and alters behavior of an element from one state to another state by applying different styles for each state.

Following table lists down some of the page transitions used in the jQuery Mobile framework −

Sr.No. Transition & Description For Pages For Dialogs


You can make elements fade in and out of visibility.

Fade Page Fade Dialog


Flip the elements from back to front to the next page.

Flip Page Flip Dialog


You can create a popup window.

Pop Page Pop Dialog


Display the next page by keeping current page away.

Flow Page Flow Dialog


You can slide the page from right to left.

Slide Page Slide Dialog


Slides the page from right to left and fades in the next page.

Slidefade Page Slidefade Dialog


Slides the page from bottom to up.

Slideup Page Slideup Dialog


Slides the page from top to bottom.

Slidedown Page Slidedown Dialog


You can turn to the next page.

Turn Page Turn Dialog


You cannot use any transition effect by using this attribute.

None Page None Dialog

Setting Transition and Global Configuration

By default, pages will have fade transition in the framework. You can use custom transitions by adding the data-transition attribute to the link. You can use different default transition effects for the page using defaultPageTransition option globally. For dialogs, you can make use of defaultDialogTransition option.

Fallback Transition

All transitions support 3D transformations except the fade transition. The devices which do not support 3D transformation, they will have to make use of fade transition. Some browsers do not support 3D transformations for each transition type, so you can use the fade as default transition fallback.

Max Scroll for Transitions

The transitions are set to none when you are scrolling from or to a page and the scroll position will be three times the height of the device screen. Sometimes, you may get slow in responding or the browser may crash when you click any navigation element; so to avoid this we are using the scroll position for transition by using getMaxScrollForTransition function.

Max Width for Transitions

You can disable the transition when the window width is higher than the pixel width. You can configure the max width for transitions using the $.mobile.maxTransitionWidth global option, which is set to false by default. It takes values such as pixel width or false value, and the transition will be set to none if it is not a false value when the window is higher than the specified value.

Same Page Transition

You can add the transitions to the current page using the allowSamePageTransition option of page container widget's change() method.

Creating Custom Transitions

You can create the custom transitions in the page using the $.mobile.transitionHandlers option that expands the selection of transitions on the website or application.