您当前的位置: 二. 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="images/01.jpg"/> 19 <div> 20 <h6><ahref="javascript:;">海贼王</a></h6> 21 <p>播放次数：888</p> 22 </div> 23 </li> 24 <li> 25 <imgsrc="images/01.jpg"/> 26 <div> 27 <h6><ahref="javascript:;">海贼王</a></h6> 28 <p>播放次数：888</p> 29 </div> 30 </li><li> 31 <imgsrc="images/01.jpg"/> 32 <div> 33 <h6><ahref="javascript:;">海贼王</a></h6> 34 <p>播放次数：888</p> 35 </div> 36 </li><li> 37 <imgsrc="images/01.jpg"/> 38 <div> 39 <h6><ahref="javascript:;">海贼王</a></h6> 40 <p>播放次数：888</p> 41 </div> 42 </li> 43 <li> 44 <imgsrc="images/02.jpg"/> 45 <div> 46 <h6><ahref="javascript:;">叮当</a></h6> 47 <p>播放次数：889</p> 48 </div> 49 </li> 50 <li> 51 <imgsrc="images/02.jpg"/> 52 <div> 53 <h6><ahref="javascript:;">叮当</a></h6> 54 <p>播放次数：889</p> 55 </div> 56 </li> 57 <li> 58 <imgsrc="images/02.jpg"/> 59 <div> 60 <h6><ahref="javascript:;">叮当</a></h6> 61 <p>播放次数：889</p> 62 </div> 63 </li> 64 <li> 65 <imgsrc="images/02.jpg"/> 66 <div> 67 <h6><ahref="javascript:;">叮当</a></h6> 68 <p>播放次数：889</p> 69 </div> 70 </li> 71 <li> 72 <imgsrc="images/03.jpg"/> 73 <div> 74 <h6><ahref="javascript:;">火影</a></h6> 75 <p>播放次数：887</p> 76 </div> 77 </li> 78 <li> 79 <imgsrc="images/03.jpg"/> 80 <div> 81 <h6><ahref="javascript:;">火影</a></h6> 82 <p>播放次数：887</p> 83 </div> 84 </li> 85 <li> 86 <imgsrc="images/03.jpg"/> 87 <div> 88 <h6><ahref="javascript:;">火影</a></h6> 89 <p>播放次数：887</p> 90 </div> 91 </li> 92 <li> 93 <imgsrc="images/03.jpg"/> 94 <div> 95 <h6><ahref="javascript:;">火影</a></h6> 96 <p>播放次数：887</p> 97 </div> 98 </li> 99 <li> 100 <imgsrc="images/04.jpg"/> 101 <div> 102 <h6><ahref="javascript:;">龙珠</a></h6> 103 <p>播放次数：886</p> 104 </div> 105 </li> 106 <li> 107 <imgsrc="images/04.jpg"/> 108 <div> 109 <h6><ahref="javascript:;">龙珠</a></h6> 110 <p>播放次数：886</p> 111 </div> 112 </li> 113 <li> 114 <imgsrc="images/04.jpg"/> 115 <div> 116 <h6><ahref="javascript:;">龙珠</a></h6> 117 <p>播放次数：886</p> 118 </div> 119 </li> 120 <li> 121 <imgsrc="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:0;padding:0; 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 })