jQuery Mobile 包含 CSS3 效果讓您選擇頁面打開的方式。
jQuery Mobile 頁面切換效果
jQuery Mobile 提供了各種頁面切換到下一個(gè)頁面的效果。
注意：為了實(shí)現(xiàn)頁面切換效果，瀏覽器必須支持 CSS3 3D 切換：
 |  |  |  |  |
|---|---|---|---|---|
| 12.0 | 10.0 | 16.0 | 4.0 | 15.0 |
表格中的數(shù)字為支持 3D 旋轉(zhuǎn)的最小瀏覽器版本號。
頁面過渡效果可被應(yīng)用于任何使用 data-transition 屬性的鏈接或表單：
頁面切換效果可被應(yīng)用于任何使用 data-transition 屬性的鏈接或表單提交：
<a href="#anylink" data-transition="slide">切換到第二個(gè)頁面</a>
下面的表格顯示了通過使用 data-transition 屬性后可用的頁面切換：
| 過渡 | 描述 | 頁面 | 對話框 |
|---|---|---|---|
| fade | 默認(rèn)。淡入到下一頁 | 嘗試一下 | 嘗試一下 |
| flip | 從后向前翻轉(zhuǎn)到下一頁 | 嘗試一下 | 嘗試一下 |
| flow | 拋出當(dāng)前頁，進(jìn)入下一頁 | 嘗試一下 | 嘗試一下 |
| pop | 像彈出窗口那樣轉(zhuǎn)到下一頁。 | 嘗試一下 | 嘗試一下 |
| slide | 從右向左滑動(dòng)到下一頁。 | 嘗試一下 | 嘗試一下 |
| slidefade | 從右向左滑動(dòng)并淡入到下一頁。 | 嘗試一下 | 嘗試一下 |
| slideup | 從下到上滑動(dòng)到下一頁。 | 嘗試一下 | 嘗試一下 |
| slidedown | 從上到下滑動(dòng)到下一頁。 | 嘗試一下 | 嘗試一下 |
| turn | 轉(zhuǎn)向下一頁。 | 嘗試一下 | 嘗試一下 |
| none | 無過渡效果。 | 嘗試一下 | 嘗試一下 |
 | 在 jQuery Mobile 的所有鏈接上，默認(rèn)使用淡入淡出的效果（如果瀏覽器支持）。 |
|---|
提示：上面的所有效果支持后退行為。例如，如果您想要頁面從左向右滑動(dòng)，而不是從右向左滑動(dòng)，請使用帶有 "reverse" 值的 data-direction 屬性。在后退按鈕上這是默認(rèn)的。
實(shí)例
<a href="#pagetwo" data-transition="slide" data-direction="reverse">切換</a>
運(yùn)行實(shí)例 ?
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例