本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.7节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看
当点击一个会使用AJAX加载页面的内部链接时，jQuery Mobile提供了过渡动画。默认情况下，你会看到页面滑向左侧。
jQuery Mobile准备了少量的默认动画供你选择。它们是pop、slidefade、slide、slideup、slidedown、fade和flip。代码清单9-8演示了如何更改链接上的动画。
代码清单9-8 使用动画导航至第二张页面
00 <!DOCTYPE html> 01 <html> 02 <head> 03 <title>Transition</title> 04 <meta name="viewport" 05 content="width=device-width, initial-scale=1"> 06 <link rel="stylesheet" href= 07 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"> 08 <script type="text/javascript" 09 src="http://code.jquery.com/jquery-1.7.1.min.js"> 10 </script> 11 <script type="text/javascript" src= 12 "http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"> 13 </script> 14 </head> 15 <body> 16 17 <div data-role="page"> 18 19 <div data-role="header"> 20 <h1>First</h1> 21 </div> 22 23 <div data-role="content"> 24 <p>Hello world <a href="#second" data-transition="pop">and go 25 to the second</a></p> 26 <!-- or slide, slipdeup, slidedown, fade or flip 27 (support for flip is limited on Android) --> 28 </div> 29 30 </div> 31 32 <div data-role="page" id="second"> 33 34 <div data-role="header"> 35 <h1>Second</h1> 36 </div> 37 <div data-role="content"> 38 Hello again! 39 </div> 40 41 </div> 42 43 </body> 44 </html>第24行引进了data-transition属性。这个属性也可用于form元素上。框架底层会处理动画。
相关资源：敏捷开发V1.0.pptx