HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
jQuery Mobile contains CSS3 effect allows you to select the page to open the way.
jQuery Mobile provides a variety of page switch to the next page of results.
Note: In order to achieve the effect of switching the page, the browser must support CSS3 3D switching:
12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
Figures in the table to support 3D rotating minimum browser version number.
Page transition effects can be applied to any use of data-transition attribute link or form:
Page transition effects can be applied to any use of data-transition attribute link or form submission:
<a href="#anylink" data-transition="slide">切换到第二个页面</a>
The following table shows the data-transition through the use of available properties to switch the page:
transition | description | page | Dialog |
---|---|---|---|
fade | default. Fade to the next page | try it | try it |
flip | From flip forward to the next page | try it | try it |
flow | Throws this page to the next page | try it | try it |
pop | Like pop-ups that go to the next page. | try it | try it |
slide | Swipe from the right to the next page. | try it | try it |
slidefade | Swipe left and right to fade to the next page. | try it | try it |
slideup | Slide from bottom to top to the next page. | try it | try it |
slidedown | Top to bottom, slide to the next. | try it | try it |
turn | Turn the next page. | try it | try it |
none | No transition effect. | try it | try it |
All jQuery Mobile link on the default fade effect (if the browser supports). |
Note: All the above effects support backward behavior. For example, if you want to slide the page from left to right, right to left instead of sliding, use data-direction property with the "reverse" value. On the Back button which is the default.