二. jQuery中的动画

动画在前面几章案例中是回避不了的问题。此处结合一些简便的写法稍作系统的分析。

1. show()和hide()
(1)介绍——不用过多的介绍了
jQuery最基本的方法。本质是某个html对象的display从none和显示之间切换的丰富过程。在display为none之前,jq会记住原来对象的显示方式。原来是inline,再次调用show()方法时,显示方式不变。

回到例4.1中FAQ的例子——(运行环境jQuery1.7.2

  1. $(document).ready(function(){
  2. $('#panel h5.head').bind('click',function({
  3. $('#panel h5.head').toggle(function(){
  4. $(this).next().hide();
  5. },function(){
  6. $(this).next().show();
  7. })
  8. })
  9. })
或者
  1. $(document).ready(function(){
  2. var bShow=false;
  3. $('#panel h5.head').bind('click',function({
  4. if(bShow){
  5. $(this).next().hide();
  6. }else{
  7. $(this).next().show()
  8. }
  9. bShow=!bShow;
  10. })
  11. })
 
 
 

可以发现,该例子中的宽、高、不透明度都是变化的。display:none只是函数的终点。

2.fadeIn()和fadeOut()

只改变不透明度,相关元素的节点都存在。

jq1

  1. $(document).ready(function(){
  2. $('#panel h5.head').click(function(){
  3. $(this).next().fadeToggle();
  4. })
  5. })
注:fadeToggle通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

jq2

  1. $(document).ready(function(){
  2. $('#panel h5.head').bind('click',function(){
  3. if($(this).next().is(':visible')){
  4. $(this).next().fadeOut();
  5. }else{
  6. $(this).next().fadeIn();
  7. }
  8. })
  9. })
 再对案例进行修改

 

 
【补白】可以使用fadeTo()方法来实现不透明度的渐进式变化——这相当于介乎fadeIn-fadeOut方法的一个中间状态。
  1. $(document).ready(function(){
  2. $('#panel h5.head').click(function(){
  3. $(this).next().fadeToggle(600,0.2);
  4. })
  5. })

3. slideDown()和slideUp()

slideDown()元素由上至下显示。slideUp()正好相反。以下两段代码都可以替代toggle()使用

注:slideToggle通过高度变化来切换所有匹配元素的可见性,这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

jq1

  1. $(document).ready(function(){
  2. $('#panel h5.head').click(function(){
  3. $(this).next().slideToggle();
  4. })
  5. })
jq2
  1. $(document).ready(function(){
  2. $('#panel h5.head').bind('click',function(){
  3. if($(this).next().is(':visible')){
  4. $(this).next().slideUp();
  5. }else{
  6. $(this).next().slideDown();
  7. }
  8. })
  9. })

 

4.参数

以上三类函数都可以用一套参数。

不带任何参数时,显示方式是马上变化。
fast——200ms显示
normal——400ms显示
slow——600ms显示
也可以直接写数字,比如show(300)表示在300ms内显示完毕。

【小结】可以认为show-hide方法是fadeIn-fadeOut(改变透明度)和slideUp-slideDown(改变高度)的综合。它既改变又改变透明度。

5.自定义动画方法——animate()

  1. animate(params,speed,callback)
params包含样式属性和值的映射。注意,和css不同的是这里用逗号隔开,而不是分号!比如
  { 样式1:值1, 样式2:值2,... } 
speed:速度参数(可选)
callback:动画完成时执行的函数(可选)

(1)自定义一个简单的动画吧

【例4.2】一个空白文档, 一个div被单击后能在页面横向飘动。

  1. <divid="div1"></div>
  2.  
  3. *{margin:0;padding:0}
  4. #div1{
  5. width:100px;height:100px;
  6. background: red;
  7. position: absolute;
  8. margin:20px;
  9. }
jq
  1. $(function(){
  2. $('#div1').click(function(){
  3. alert($(this).attr('left'))
  4. $(this).animate({left:500+'px'},3000);//3s内移动到左距离500px处
  5. });
  6. });
速度由慢到快再减为0.
 

(2)累加累减

上面的案例套用原生js分析,运动就是#div1的offsetLeft不断增加的过程。代码{left:500+'px'}提示了运动的终点是500px处,但当定位不同时,运动的距离不一样。有时候我们不知道自己身在何处,只知道最终前进的方向和距离。这时适用于累加累减动画

  1. $(function(){
  2. $('#div1').click(function(){
  3. $(this).animate({left:'+=500px'},3000);//3s内向右移动500px
  4. });
  5. });

(3)再复杂一点点

要求:div1向右运动同时,增加宽度。
  1. $(function(){
  2. $('#div1').click(function(){
  3. $(this).animate({left:'+=500px',width:'200px'},3000);//3s内向右移动500px
  4. });
  5. });
 

(4)还不够

要求:div1运动完了之后,触发第二个运动:向右变窄——让变窄和运动同时发生吧
  1. $(function(){
  2. $('#div1').click(function(){
  3. $(this).animate({left:'500px',width:'200px'},3000);//第一个动画
  4. $(this).animate({left:'600px',width:'100px'},1000);//接下来发生的动画
  5. }
  6. );
  7. });
结果真的可以,但是录屏软件诡异地无法记录这一过程。所以只好自己试试了。

(5)综合运用

单击div1,向有运动变宽同时不透明度有0.5变为1,之后向下运动,最后淡出隐藏
  1. $(function(){
  2. $('#div1').click(function(){
  3. $(this).animate({left:'500px',width:'200px',opacity:'1'},3000)
  4. .animate({left:'600px',width:'100px'},1000)
  5. .animate({top:'500px',height:'200px'},3000)
  6. .animate({top:'600px',height:'100px'},1000)
  7. .fadeOut(600);
  8. });
  9. });
这个过程称为动画队列。
 

6.动画回调函数

如果上面例子最后一步我想让div1的颜色变为绿色,会遇到一个问题。如果把$(this).css('background','green')写进队列最后一行,不能取得预期效果。实际情况是变色与动画同时执行。
原因在于css改变属于非动画,直接排到队列里是不起作用的。如果要做,因使用回调函数,写在最后一个动画里边。
 
  1. $(function(){
  2. $('#div1').click(function(){
  3. $(this).animate({left:'500px',width:'200px',opacity:'1'},3000)
  4. .animate({left:'600px',width:'100px'},1000)
  5. .animate({top:'500px',height:'200px'},3000)
  6. .animate({top:'600px',height:'100px'},1000,function(){
  7. $(this).css('background','green')//回调函数
  8. })
  9. });
  10. });

7.动画控制

(1)停止动画——stop()方法
  1. xxx.stop([clearQueue],[gotoEnd]);
两个参数都是布尔值,都是可选的。前者表示是否清空队列,后者则表示是否直接定格到最终画面。什么参数都不写——则中止当前步骤,跳到下一步骤继续执行。
场景1:设想一下,一个鼠标移入动画,还没展示完,用户就移出了。就需要stop()方法。
  1. $(function(){
  2. $('#div1').hover(function(){
  3. $(this).stop()
  4. .animate(鼠标移入动画)
  5. },function(){
  6. $(this).stop()
  7. .animate(鼠标移出动画)
  8. })
  9. });
而对于组合动画,需要使用带清除队列参数的stop方法。也就是stop(true)。其它和上面代码基本一致。
场景2:动画本是连续的。但是stop()突然把一步停了,接下来的执行其实也失去了意义。
解决方案:跳到最终状态。
stop(false,true)
gotoEnd参数通常和clearQueue参数这样组合起来用。

(2)动画判断

动画的一个重要原则在于:始终与用户行为一致。不然体验就会出现问题。

又一个简单的场景是:疯狂移入移出导致动画不断叠加,"久久不能平息"。

因此,需要加一个判断模块:

a.当前动画如果已经结束,则可以执行用户触发的又一个动画;

b.当前如果未结束,那就不执行任何动画!

  1. if(!对象.is(':animated')){
  2. //如果当前没有进行动画,则在此执行新动画
  3. }else{...}
(3)延迟动画——delay()方法
比如说,我想让某个动画过1s后再执行。
  1. xxx.animate({属性1:'值1',...},动画执行时间).delay(1000)
8.动画方法小结
(1)本节介绍的动画效果,贯穿各种分析,会发现,这些效果全部是可以通过animate来实现的。透明度——渐进式宽高变化——位置变化,无非就是这三样东西而已。
(2)动画队列的发生顺序:
a.一个animate多个属性变化————同时发生
b.正常情况下链式写法:动画是按顺序发生的
c.多组元素下的动画————默认同时发生
d.回调函数把非动画(比如css改变)插入到动画队列——按顺序发生
【久违的大案例】图片滚动
 

 
 

难点:

(1)首尾如何跳转

(2)注意蓝色的圆点切换

布局

  1. <divid="cartoon">
  2. <divclass="header">
  3. <h4>卡通动漫</h4>
  4. <ulclass="dot">
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. <li></li>
  9. </ul>
  10. <divclass="btn">
  11. <divclass="btn1"></div>
  12. <divclass="btn2"></div>
  13. </div>
  14. <divclass="more"><ahref="javascript:;">更多</a></div>
  15. </div>
  16. <ulclass="scroll">
  17. <li>
  18. <imgsrc="data:images/01.jpg"/>
  19. <div>
  20. <h6><ahref="javascript:;">海贼王</a></h6>
  21. <p>播放次数:888</p>
  22. </div>
  23. </li>
  24. <li>
  25. <imgsrc="data:images/01.jpg"/>
  26. <div>
  27. <h6><ahref="javascript:;">海贼王</a></h6>
  28. <p>播放次数:888</p>
  29. </div>
  30. </li><li>
  31. <imgsrc="data:images/01.jpg"/>
  32. <div>
  33. <h6><ahref="javascript:;">海贼王</a></h6>
  34. <p>播放次数:888</p>
  35. </div>
  36. </li><li>
  37. <imgsrc="data:images/01.jpg"/>
  38. <div>
  39. <h6><ahref="javascript:;">海贼王</a></h6>
  40. <p>播放次数:888</p>
  41. </div>
  42. </li>
  43. <li>
  44. <imgsrc="data:images/02.jpg"/>
  45. <div>
  46. <h6><ahref="javascript:;">叮当</a></h6>
  47. <p>播放次数:889</p>
  48. </div>
  49. </li>
  50. <li>
  51. <imgsrc="data:images/02.jpg"/>
  52. <div>
  53. <h6><ahref="javascript:;">叮当</a></h6>
  54. <p>播放次数:889</p>
  55. </div>
  56. </li>
  57. <li>
  58. <imgsrc="data:images/02.jpg"/>
  59. <div>
  60. <h6><ahref="javascript:;">叮当</a></h6>
  61. <p>播放次数:889</p>
  62. </div>
  63. </li>
  64. <li>
  65. <imgsrc="data:images/02.jpg"/>
  66. <div>
  67. <h6><ahref="javascript:;">叮当</a></h6>
  68. <p>播放次数:889</p>
  69. </div>
  70. </li>
  71. <li>
  72. <imgsrc="data:images/03.jpg"/>
  73. <div>
  74. <h6><ahref="javascript:;">火影</a></h6>
  75. <p>播放次数:887</p>
  76. </div>
  77. </li>
  78. <li>
  79. <imgsrc="data:images/03.jpg"/>
  80. <div>
  81. <h6><ahref="javascript:;">火影</a></h6>
  82. <p>播放次数:887</p>
  83. </div>
  84. </li>
  85. <li>
  86. <imgsrc="data:images/03.jpg"/>
  87. <div>
  88. <h6><ahref="javascript:;">火影</a></h6>
  89. <p>播放次数:887</p>
  90. </div>
  91. </li>
  92. <li>
  93. <imgsrc="data:images/03.jpg"/>
  94. <div>
  95. <h6><ahref="javascript:;">火影</a></h6>
  96. <p>播放次数:887</p>
  97. </div>
  98. </li>
  99. <li>
  100. <imgsrc="data:images/04.jpg"/>
  101. <div>
  102. <h6><ahref="javascript:;">龙珠</a></h6>
  103. <p>播放次数:886</p>
  104. </div>
  105. </li>
  106. <li>
  107. <imgsrc="data:images/04.jpg"/>
  108. <div>
  109. <h6><ahref="javascript:;">龙珠</a></h6>
  110. <p>播放次数:886</p>
  111. </div>
  112. </li>
  113. <li>
  114. <imgsrc="data:images/04.jpg"/>
  115. <div>
  116. <h6><ahref="javascript:;">龙珠</a></h6>
  117. <p>播放次数:886</p>
  118. </div>
  119. </li>
  120. <li>
  121. <imgsrc="data:images/04.jpg"/>
  122. <div>
  123. <h6><ahref="javascript:;">龙珠</a></h6>
  124. <p>播放次数:886</p>
  125. </div>
  126. </li>
  127. </ul>
  128. </div>

css

  1. *{
  2. margin:;padding:;
  3. font-family:"微软雅黑",arial;
  4. }
  5. ul li{
  6. list-style:none;
  7. }
  8. a{
  9. text-decoration: none;
  10. }
  11. #cartoon{
  12. width:596px;height:186px;
  13. border:1px solid #ccc;
  14. border-radius:4px4px00;
  15. margin:100pxauto;
  16. position: relative;
  17. overflow: hidden;
  18. }
  19. .header{
  20. height:30px;
  21. background: linear-gradient(#f2f2f2,#e3e3e3);
  22. }
  23. h4{
  24. width:70px;float: left;
  25. height:30px;line-height:30px;
  26. margin-left:12px;
  27. }
  28. .dot{
  29. padding:10px;width:60px;
  30. float: left;
  31. }
  32. .dot>li{
  33. width:8px;height:8px;
  34. border-radius:50%;
  35. background:#04AEF4;
  36. float: left;margin-right:4px;
  37. }
  38. .btn,.more{
  39. float: left;
  40. }
  41. .btn{
  42. width:57px;height:20px;
  43. border-radius:2px;
  44. box-shadow:1px1px3px#999;
  45. margin-top:5px;
  46. cursor: pointer;
  47. }
  48. .btn1{
  49. width:29px;height:20px;float: left;
  50. background: url(../images/btn_cartoon_01.gif)
  51. }
  52. .btn2{
  53. width:28px;height:20px;float: left;
  54. background: url(../images/btn_cartoon_02.gif)
  55. }
  56. .more{
  57. line-height:30px;margin-left:320px;
  58. }
  59. .more a{
  60. line-height:30px;
  61. font-style: italic;
  62. color:#2B93D2;
  63. }
  64. #cartoon>ul{
  65. height:158px;
  66. position: absolute;
  67. }
  68. #cartoon>ul>li{
  69. float: left;
  70. padding:10px;
  71. }
  72. ul a{
  73. font-size:12px;
  74. color:#2B93D2;
  75. line-height:24px;
  76. }
  77. ul a:hover{
  78. text-decoration: underline;
  79. color:#E31E1C;
  80. }
  81. ul p{
  82. font-size:12px;
  83. color:#666;
  84. line-height:18px;
  85. }
jq
思路是用一个计数器控制运动轨迹和小圆点变化
  1. $(function(){
  2. var count=0;
  3. var aDotLi=document.getElementsByClassName('dot')[0].getElementsByTagName('li');
  4. //获取原点li
  5. aDotLi[0].style.background='#04AEF4';
  6. $('.scroll').css('width',(($('.scroll>li').width()+20)*$('.scroll>li').length)+'px');
  7. //设置滚动ul的宽度。(设不设置都好像可以。)
  8. //
  9. $('#btn1').click(function(){
  10. if($('.scroll').is(':animated')==true){
  11. returnfalse;
  12. }//控制动画模块
  13. $('.dot>li').css('background','#fff');//初始化原点颜色
  14. count-=1;
  15. if(count<0){
  16. count=count+4;
  17. }//原点计算规则:0/3/2/1/0/3/2/1......
  18. $('.scroll').animate({left:-148*4*(count)+'px'},300);
  19. aDotLi[count].style.background='#04AEF4';
  20. })
  21. $('#btn2').click(function(){
  22. if($('.scroll').is(':animated')==true){
  23. returnfalse;
  24. }
  25. $('.dot>li').css('background','#fff');
  26. count+=1;
  27. if(count>3){
  28. count=0;
  29. }//计算规则:0/1/2/3/0/1/2/3...
  30. $('.scroll').animate({left:-148*4*count+'px'},300);
  31. aDotLi[count].style.background='#04AEF4';
  32. })
  33. })

第4章 jQuery的事件和动画(二)的更多相关文章

  1. 第4章 jQuery的事件和动画(1)——事件篇

    jQuery扩展了JavaScript的基本事件处理机制,极大增强了事件处理能力 一. jQuery的事件 1. $(document).ready(function(){})加载方式 再次回到win ...

  2. Jquery绑定事件及动画效果

    Jquery绑定事件及动画效果 本文转载于:https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind(ty ...

  3. jquery实现一些小动画二

    jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. 不写完不让回家的JQuery的事件与动画

    在这看不见太阳的小黑屋里,苦逼的一天又开始了 好了闲话我也就不扯了,接下来我就来说说我对jQuery事件和动画的理解吧!!! 还是得再扯两句,我们敬爱的,Y老师讲完了,jQuery事件和动画,对着我们 ...

  5. jQuery中事件与动画

    jQuery中的事件与动画   一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.windo ...

  6. jQuery之事件和动画

    1.加载DOM $(document).ready(function(){ }) 简写形式: $(function(){ }) 事件绑定: 合成事件 事件冒泡 移除事件 JQuery中的动画 show ...

  7. jQuery的事件与 动画

    什么是事件: 事件的本质是委托. Jquery的 方法: $().css(); $().click(); 等等. 鼠标的事件: 区别在于:mouseover与mouseout再进入或离开后会执行这两个 ...

  8. jQuery中事件与动画的总结

       1.加载DOM     1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行   $(function(){}) ……:只是 ...

  9. jQuery的事件和动画

    1.animate的应用 animate(params,[duration],[easing],[callback]) 参数实例: params:     {width:"20%" ...

随机推荐

  1. 任意文件夹下打开cmd功能的设置(win10)

    win10中打开cmd的方法: 1."运行"中输入CMD打开,也可以按住win+R 2.选择命令行工具中"开始-->>所有应用-->>Window ...

  2. Jsoup获取部分页面数据失败 org.jsoup.UnsupportedMimeTypeException: Unhandled content type. Must be text/*, application/xml, or application/xhtml+xml.

    用Jsoup在获取一些网站的数据时,起初获取很顺利,但是在访问某浪的数据是Jsoup报错,应该是请求头里面的请求类型(ContextType)不符合要求. 请求代码如下: private static ...

  3. 【日常笔记】java spring 注解读取文件

    获取后缀文件 <!-- 注解读取properties文件开始 @Value("#{configProperties['userPageSize']}")private Str ...

  4. judge remote file exist

    # -*- coding:utf-8 -*- import paramiko,os,sys,time print ''' *****判断远端服务器上的某个文件是否存在***** ''' ip = ra ...

  5. maven-腾讯SDK(QQ)接口java引入pom配置

    maven的pom.xml配置 <dependency> <groupId>net.gplatform</groupId> <artifactId>Sd ...

  6. C# 不支持关键字: “.;database”。

    解决方案分析:这个一定是链接字符串有问题,核对web.config 和程序的字符串是否有误

  7. 解决Eclipse建立Maven项目后无法建立src/main/java资源文件夹的办法

      建立好一个Maven项目后,如果Java Resources资源文件下没有src/main/java文件夹,并且在手动创建这个文件时提示“已存在文件”. 这说明,在这个项目配置中已经有了src/m ...

  8. 翻滚吧,Spark (错误记录)

    1) 本地运行报错: Exception in thread "main" org.apache.spark.SparkException: A master URL must b ...

  9. 【BZOJ-2502】清理雪道 有上下界的网络流(有下界的最小流)

    2502: 清理雪道 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 594  Solved: 318[Submit][Status][Discuss] ...

  10. javaScript与MVC

    MVC,就是Module,View,Controller分离,使业务逻辑更加清晰,但是现在公司的项目中很多地方那个不是这样的,很多业务逻辑放在了javascript中实现,这样做的优点就是对于技术要求 ...