jQuery Mobile 教程：页面切换动画
1、<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>
<div data-role="content">
点击链接来查看弹窗效果。
<a href="#pagetwo" data-transition="pop">转到页面二</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>欢迎访问我的主页</h1>
</div>茄孝
<div data-role="content">
点击链接距国返回页面一。<b>注释：</b>：fade 是默认效果。
<a href="#pageone">返回页面一</a>
</div>
<div data-role="footer">
<h1>页脚文本</h1>兼总温
</div>
</div>
</body>
</html>
2、代码中 data-transition="pop" 表示页面过渡，值为pop，也就是弹窗效果
3、将data-transition值更改可以改变过渡效果，下面是对应效果的值
fade：淡入淡出效果
flip ：翻页效果
flow：流效果
pop ：弹窗效果
slide：滑动效果
slidefade：滑动淡出效果
slideup：上滑动效果
slidedown：下滑动效果
turn：翻页效果
none：无过度动画
reverse：反向