首页 > 代码库 > 第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 })
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 })
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()使用
jq1
1 $(document).ready(function(){2 $(‘#panel h5.head‘).click(function(){3 $(this).next().slideToggle();4 })5 })
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)
(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 }
1 $(function(){2 $(‘#div1‘).click(function(){3 alert($(this).attr(‘left‘))4 $(this).animate({left:500+‘px‘},3000);//3s内移动到左距离500px处5 });6 });
(2)累加累减
上面的案例套用原生js分析,运动就是#div1的offsetLeft不断增加的过程。代码{left:500+‘px‘}提示了运动的终点是500px处,但当定位不同时,运动的距离不一样。有时候我们不知道自己身在何处,只知道最终前进的方向和距离。这时适用于累加累减动画
1 $(function(){2 $(‘#div1‘).click(function(){3 $(this).animate({left:‘+=500px‘},3000);//3s内向右移动500px4 });5 });
(3)再复杂一点点
1 $(function(){2 $(‘#div1‘).click(function(){3 $(this).animate({left:‘+=500px‘,width:‘200px‘},3000);//3s内向右移动500px4 });5 });
(4)还不够
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)综合运用
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.动画回调函数
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 xxx.stop([clearQueue],[gotoEnd]);
1 $(function(){2 $(‘#div1‘).hover(function(){3 $(this).stop()4 .animate(鼠标移入动画)5 },function(){6 $(this).stop()7 .animate(鼠标移出动画)8 })9 });
(2)动画判断
动画的一个重要原则在于:始终与用户行为一致。不然体验就会出现问题。
又一个简单的场景是:疯狂移入移出导致动画不断叠加,"久久不能平息"。
因此,需要加一个判断模块:
a.当前动画如果已经结束,则可以执行用户触发的又一个动画;
b.当前如果未结束,那就不执行任何动画!
1 if(!对象.is(‘:animated‘)){2 //如果当前没有进行动画,则在此执行新动画3 }else{...}
1 xxx.animate({属性1:‘值1‘,...},动画执行时间).delay(1000)
难点:
(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 }
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的事件和动画(二)