#

Navigation Search

- Accordion
- AJAX Navigation
- Autocomplete
- Buttons
- Checkboxes
- Collapsibles
- Controlgroup
- Filter New
- Dialogs
- Fixed toolbars
- Flip switch, slider
- Flip switch New
- Footer toolbar
- Form elements
- Grids
- Header toolbar
- Icons New
- Links
- Listviews
- Loader
- Navbar
- Navbar, persistent
- Pages
- Panels
- Popup
- Radio buttons
- Select
- Select, custom
- Slider, single
- Slider, dual range
- Table, column toggle
- Table, reflow
- Text inputs & textarea
- Transitions
- Collapsibles
- Dynamic collapsible
- Controlgroups
- Dynamic controlgroup
- Listviews
- Grid Listview
- Autodividers Linkbar
- Autodividers Selector
- Maps
- Google Maps & Geolocation
- Google Maps with List toggle
- Navigation
- Backbone and Require.js example
- Redirection with server-side support
- Panels
- Panel styling
- Open panel on swipe
- Popups
- Dynamic popup
- Popup with arrow
- Responsive Tables
- Reflow: Custom styles
- Reflow: Heading groups
- Column toggle: Customization options
- Column toggle: Heading groups
- Column toggle demo: Phone comparison
- Sliders
- Tooltip extension
- Swipe
- Swipe to navigate
- Swipe to delete list item
- Forms
- Why won't my CSS styles apply correctly to a widget?
- Updating the value of enhanced form elements does not work.
- My HTML 5 inputs look different across devices and browsers.
- My range or search inputs are being change to number/text.
- Sometimes my custom select shows as a popup other times its a dialog.
- Disabling a button does not work.
- Controls in my fixed header or footer are not responding or behave erratically.
- Pages
- Why aren't my scripts and styles loading?
- Why isn't DOM ready working for my scripts?
- How do I load a page?
- Why is only the first page of my multi page document loaded?
- I'm trying to pass query params to a page but it's not working?
- I'm trying to pass information via the hash but it's not working?
- I'm trying to use the application cache but it's not working.
- Content injected into a page is not enhanced.
- Triggering create on injected HTML does not work.
- How can I stop JQM from auto-enhancing an element?
- How can I stop JQM from enhancing a block of elements?
- How do I control page titles?
- How do I load a page?
- How do I turn off the automatic hiding of the url bar?
- Events
- How do I use touch and mouse events?
- Theme and styling
- How does theming work?
- Apps
- How do I need to configure PhoneGap/Cordova?

# Transitions

The jQuery Mobile framework includes a set of CSS-based transition effects that can be applied to any page link or form submission with AJAX navigation.

## Page transitions

### fade | dialog | page
### pop | dialog | page
### flip | dialog | page
### turn | dialog | page
### flow | dialog | page
### slidefade | dialog | page
### slide | dialog | page
### slideup | dialog | page
### slidedown | dialog | page
### none | dialog | page

Important: Some platforms currently have issues with transitions. We are working on a solution to solve the problem for everyone. If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround. Please note that this workaround should be thoroughly tested on the target platform before deployment. This workaround is known to cause performance issues and browser crashes on some platforms, especially Android. Add the following code to your custom css.

`.ui-page { -webkit-backface-visibility: hidden; }`

Only seeing fade transitions? To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).

Transitions were originally inspired by jQtouch They've since been rebuilt, but props to David Kaneda and Jonathan Stark for the initial guidance.

## Setting a transition

By default, the framework applies a fade transition. To set a custom transition effect, add the `data-transition` attribute to the link.

``<a href="index.html" data-transition="pop">I'll pop</a>``

When the Back button is pressed, the framework will automatically apply the reverse version of the transition that was used to show the page. To specify that the reverse version of a transition should be used, add the `data-direction="reverse"` attribute to a link.

## Global configuration

Set the `defaultPageTransition` global option if you'd prefer a different default transition. Dialogs have a different option called `defaultDialogTransition` that can also be configured.

## Browser support

All transitions are built with CSS keyframe animations and include `-webkit` vendor prefixed rules for iOS, Blackberry, Android, Safari and Chrome browsers, `-moz` rules for Firefox browsers, and unprefixed rules for Windows Phone 8 and IE10. Support for keyframe animations and transition smoothness is determined by the browser version and hardware and will safely fall back to no transition if animations aren't supported. To proactively exclude transition in situations with poor performance, we exclude browsers that lack 3D transforms and provide a fallback transition and apply a max width for when transitions are applied.

## Fallback transition

By default, all transitions except fade require 3D transform support. Devices that lack 3D support will fall back to a fade transition, regardless of the transition specified. We do this to proactively exclude poorly-performing platforms like Android 2.x from advanced transitions and ensure they still have a smooth experience. Note that there are platforms such as Android 3.0 that technically support 3D transforms, but still have poor animation performance so this won't guarantee that every browser will be 100% flicker-free but we try to target this responsibly.

The fallback transition for browsers that don't support 3D transforms can be configured for each transition type, but by default we specify "fade" as the fallback. For example, this will set the fallback transition for the slideout transition to "none":

`$.mobile.transitionFallbacks.slideout = "none"`

## Max scroll for transitions

By default, transitions are disabled (set to "none") when you're either coming FROM or going TO a page where the scroll position is 3x the height of the device's screen. This feature was added because of the slow response times and the possibility of browser crashing when clicking on a list item (or any navigation element) far down a long page which leads to the browser trying to animate a really massively tall page from the scroll position to the top of the screen. The scroll position, not total screen height, is the determining factor for performance. This scroll position breakpoint is configurable via the new `getMaxScrollForTransition` function.

## Max width for transitions

By default, transitions can be disabled (set to "none") when the window width is greater than a certain pixel width. This feature is useful because transitions can be distracting or perform poorly on larger screens. This value is configurable via the global option `$.mobile.maxTransitionWidth`, which defaults to `false`. The option accepts any number representing a pixel width or `false` value. If it's not `false`, the handler will use a "none" transition when the window is wider than the specified value.

## Same page transition

Transitions to the current active page are ignored by default but can be enabled by using the `allowSamePageTransition` option of the `$.mobile.changePage` method. Note that not all transitions will work as expected and may end in an impractical result.

## Creating custom transitions

jQuery Mobile allows for the addition of custom transitions to the `$.mobile.transitionHandlers` dictionary so you can expand the selection of transitions on your site or app.