本节书摘来自异步社区《jQuery、jQuery UI及jQuery Mobile技巧与示例》一书中的第9章，第9.7节，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章节内容可以访问云栖社区“异步社区”公众号查看

9.7　技巧：指定过渡动画

当点击一个会使用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元素上。框架底层会处理动画。

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.7　技巧：指定过渡动画相关推荐

  1. 转 jquery插件--241个jquery插件—jquery插件大全

    241个jquery插件-jquery插件大全 jquery插件jqueryautocompleteajaxjavascriptcoldfusion jQuery由美国人John Resig创建,至今 ...

  2. 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.17　技巧：使用多个列

    本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第9章,第9.17节,作者:[荷]Adriaan de Jonge , [美]Phil ...

  3. 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.3　技巧：生成类名

    本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第3章,第3.3节,作者:[荷]Adriaan de Jonge , [美]Phil ...

  4. 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.4　示例：使用按钮集装饰单选框...

    本节书摘来自异步社区<jQuery.jQuery UI及jQuery Mobile技巧与示例>一书中的第7章,第7.4节,作者:[荷]Adriaan de Jonge , [美]Phil ...

  5. jQuery Mobile高手必备的十大技巧和代码片段

    本文转自51ito布加迪编译版本: http://mobile.51cto.com/hot-276160.htm 其中未发现英文原作链接,为尊重版权,google之后附上: http://www.we ...

  6. JQUERY插件学习之jQuery UI

    jQuery UI:http://jqueryui.com/ jQuery UI介绍: jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互 ...

  7. jQuery、jQury UI、jQuery Mobile----读书笔记

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> <meta name ...

  8. 第四十四课：jQuery UI和jQuery easy UI

    jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...

  9. jQuery的UI框架 Liger UI

    jQuery的UI框架 Liger UI http://www.oschina.net/p/ligerui

最新文章

  1. 图像相似度计算之直方图方法OpenCV实现
  2. SharePoint REST API - 同步SharePoint列表项
  3. 4行代码再现《黑客帝国》数字雨，在终端实现的那种
  4. Ubuntu Eclipse ns3编译中 遇到的OSError 系列问题
  5. 十多款优秀的Vue组件库介绍
  6. 【Vue】一个案例带你搞懂methods、watch及computed的使用规则
  7. python 系统编程
  8. VC++ 窗口拆分CSplitterWnd
  9. 软考下午c语言真题,软考程序员下午试题分析和备考建议
  10. 干货全拿走-用Excel构建股票量化交易模型
  11. 韩家炜课题组重磅发文：文本分类只需标签名称，不需要任何标注数据！
  12. AlphaGo算法框架解读
  13. OpenCV之图像伪彩色增强
  14. mysql建立唯一索引升序_MySQL数据库SQL优化技巧六之唯一索引
  15. win 11 无法打出中文句号问题(中/英文标点切换) 微软五笔输入法
  16. 服务器如何安装虚拟声卡,虚拟声卡安装方法和使用【图文教程】
  17. win10误删的注册表能还原吗_win10怎么还原注册表_win10注册表恢复初始的图文教程...
  18. vue H5移动端项目 真机测试配置
  19. CISCO ISIS
  20. 数据分析软件解读王者荣耀一年的“王者”成绩单

热门文章

  1. 斩断亏损，让利润奔跑
  2. 马斯克揭晓谜底！SpaceX大火箭将送日本富豪环月七日游
  3. 英伟达用GAN生成脑瘤图像，训练出的AI医生，准确率提高16%
  4. stage3图书管理系统服务器部署
  5. 云服务器的IT价值与部署分析
  6. 聊聊 rel=noopener
  7. Certificate Transparency 那些事 | JerryQu 的小站
  8. 老男孩第31期杨海学习Linux决心书
  9. Centos下安装MySQL全过程（linux下安装MySQL）
  10. opengl 坐标的基本变换