二. 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中实现,这样做的优点就是对于技术要求 ...