首页 > 代码库 > 第4章 jQuery的事件和动画(二)

第4章 jQuery的事件和动画(二)

二. 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内向右移动500px4     });5     });

(3)再复杂一点点

要求:div1向右运动同时,增加宽度。
1     $(function(){2     $(‘#div1‘).click(function(){3     $(this).animate({left:‘+=500px‘,width:‘200px‘},3000);//3s内向右移动500px4     });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     })
来自为知笔记(Wiz)



第4章 jQuery的事件和动画(二)