jQuery Mobile 包含了允許您選擇頁(yè)面打開(kāi)方式的 CSS 效果。

jQuery Mobile 過(guò)渡效果

jQuery Mobile 擁有一系列關(guān)于如何從一頁(yè)過(guò)渡到下一頁(yè)的效果。

注釋：如需實(shí)現(xiàn)過(guò)渡效果，瀏覽器必須支持 CSS3 3D 轉(zhuǎn)換：

瀏覽器支持

• Internet Explorer 10 支持 3D 轉(zhuǎn)換（更早的版本不支持）
• Opera 仍然不支持 3D 轉(zhuǎn)換

過(guò)渡效果可應(yīng)用于任意鏈接或通過(guò)使用 data-transition 屬性進(jìn)行的表單提交：

<a href="#anylink" data-transition="slide">滑動(dòng)到頁(yè)面二</a>

下面的表格展示了可與 data-transition 屬性一同使用的可用過(guò)渡：

過(guò)渡	描述	測(cè)試
fade	默認(rèn)。淡入淡出到下一頁(yè)。	測(cè)試
flip	從后向前翻動(dòng)到下一頁(yè)。	測(cè)試
flow	拋出當(dāng)前頁(yè)面，引入下一頁(yè)。	測(cè)試
pop	像彈出窗口那樣轉(zhuǎn)到下一頁(yè)。	測(cè)試
slide	從右向左滑動(dòng)到下一頁(yè)。	測(cè)試
slidefade	從右向左滑動(dòng)并淡入到下一頁(yè)。	測(cè)試
slideup	從下到上滑動(dòng)到下一頁(yè)。	測(cè)試
slidedown	從上到下滑動(dòng)到下一頁(yè)。	測(cè)試
turn	轉(zhuǎn)向下一頁(yè)。	測(cè)試
none	無(wú)過(guò)渡效果。	測(cè)試

提示：在 jQuery Mobile 中，淡入淡出效果在所有鏈接上都是默認(rèn)的（如果瀏覽器支持）。

提示：以上所有效果同時(shí)支持反向動(dòng)作，例如，如果您希望頁(yè)面從左向右滑動(dòng)，而不是從右向左，請(qǐng)使用值為 "reverse" 的 data-direction 屬性。在后退按鈕上是默認(rèn)的。

實(shí)例

<a href="#pagetwo" data-transition="slide" data-direction="reverse">滑動(dòng)</a>

親自試一試