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
|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 EffectsGive 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 effectsGive 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"