Search within TutorialsPark

jQuery Mobile : Transition Effects


Learn how to use jQuery Mobile to specify animation effects used for transition in between pages.


jQuery Mobile: Configuring Page Transition

While navigation from one page to another, jQuery Mobile makes use of animation effects while making a transition from one page to another.

These transition effects can be configured by the user as well.The default transition effect is slide, which makes the current page to slide towards left while the the new page slide in the frame from the right.

Table : Transition Effects

Name Description
slide to slide towards left while the the new page slide in the frame from the right.
slideup The current page slides upwards while the new page slides from down to up.
slidedown To the current page slides down while the new slides from up direction
pop to appear suddenly
fade To faint in the background gradually and then disappear
flip To create a turnover with a sudden quick transition
none No Transition effect

jQuery Mobile: Using the Data Transition Effects

The jQuery Mobile, data-transition attribute is used to configure the transition of link within the given element, transition effects for other links remain unaffected.

Example: jQuery Mobile - Using the Data Transition Effects

Give it a TRY! » Note: The transition effect is applied only for the first link and not the second one.


jQuery Mobile: Transition Effects

The Demo Below , displays a page in all possible Transition Effects.

Syntax: jQuery Mobile Transition effects

Give it a TRY! » Note:For Page, the transition effect fade is considered to be the best.


jQuery Mobile: Changing the Default Page Transition Effect

To change the transition effect for the entire document and not only the specified link, jQuery Mobile offers a defaultPageTransition setting, which can be set when the mobileinit event is triggered.

In order to alter the value of a global attribute, you need to assign a new value to the property $.mobile object.

To change the defaultPageTransition setting we use, $.mobile.defaultPageTransition = "flip"

Syntax: jQuery Mobile Changing the Default Page Transition Effect

Give it a TRY! » Note: This effect sets the default effect to flip , it can still be overrided using data-transition attribute.