- jQuery Mobile - Data Attributes
- jQuery Mobile - CSS Classes
- jQuery Mobile - Themes
- jQuery Mobile - Forms
- jQuery Mobile - Events
- jQuery Mobile - Widgets
- jQuery Mobile - Layouts
- jQuery Mobile - Transitions
- jQuery Mobile - Icons
- jQuery Mobile - Pages
- jQuery Mobile - Setup
- jQuery Mobile - Overview
- jQuery Mobile - Home
jQuery Mobile Useful Resources
- jQuery Mobile - Discussion
- jQuery Mobile - Useful Resources
- jQuery Mobile - Quick Guide
- jQuery Mobile - Interview Questions
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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 psts down some of the page transitions used in the jQuery Mobile framework −
Sr.No. | Transition & Description | For Pages | For Dialogs |
---|---|---|---|
1 | fade You can make elements fade in and out of visibipty. |
||
2 | fpp Fpp the elements from back to front to the next page. |
||
3 | pop You can create a popup window. |
||
4 | flow Display the next page by keeping current page away. |
||
5 | spde You can spde the page from right to left. |
||
6 | spdefade Spdes the page from right to left and fades in the next page. |
||
7 | spdeup Spdes the page from bottom to up. |
||
8 | spdedown Spdes the page from top to bottom. |
||
9 | turn You can turn to the next page. |
||
10 | none You cannot use any transition effect by using this attribute. |
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 pnk. 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 scrolpng 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 cpck 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 apppcation.
Advertisements