jQuery Mobile C...login
jQuery Mobile Classic Tutorial
author:php.cn  update time:2022-04-11 13:58:34

jQuery Mobile Transition



jQuery Mobile includes CSS3 effects that let you choose how the page opens.


jQuery Mobile page switching effects

jQuery Mobile provides various page switching effects to the next page.

Note: In order to achieve the page switching effect, the browser must support CSS3 3D switching:

#12.010.016.04.015.0

The numbers in the table are the minimum browser version numbers that support 3D rotation.

The page transition effect can be applied to any link or form that uses the data-transition attribute:

The page transition effect can be applied to any link or form submission that uses the data-transition attribute:

<a href="#anylink" data-transition="slide">切换到第二个页面</a>

The following table shows the page switches available by using the data-transition attribute:

compatible_chrome.gifcompatible_ie.gifcompatible_firefox.gifcompatible_safari.gifcompatible_opera.gif
TransitionDescriptionPageDialog
fadeDefault. Fade to the next pageTry itTry it
flipFlip from back to frontTry itTry it
flowThrow out the current page and go to the next pageTry it Give it a try
pop Go to the next page like a pop-up window. Try itTry it
slideSlide from right to left to the next page. Try itTry it
slidefadeSlide from right to left and fade to the next page. Try itTry it
slideupSlide to the next page from bottom to top. Try itTry it
slidedownSlide from top to bottom to the next page. Try itTry it
turnTurn to the next page. Try itTry it
noneNo transition effect. Try itTry it

##On all links in jQuery Mobile, the fade effect is used by default (if the browser supports it).
lamp

Tips: All the above effects support back behavior. For example, if you want the page to slide from left to right instead of right to left, use the data-direction attribute with a "reverse" value. This is the default on the back button.

Instance

<a href="#pagetwo" data-transition="slide" data-direction="reverse">切换</a>

Run instance»Click the "Run instance" button to view the online instance