目前在学习Oracle数据库，由于刚接触，学校让练习练习HTML内容，就想起了老师以前提起过的animate方法
animate是jquery的一个方法，这个方法主要功能是能实现比较平滑的动态效果，所以你想做一个简单又不失美观的动态效果不如试试它
下面总结一下以前常用的幻灯片效果实现用的方法：
切换：show(time)/hide(time):刚接触Jquery的时候大家应该用的最多的就是这两个方法，我个人觉得这个方法太丑了，一瞬间消失，或者一瞬间出现
列表滚动：这个多数人会直接使用其css属性做，或者position().left。。。等等方法，也是直接就过去了，总觉得不高大上
fadein()/fadeOut():朦胧感
slipeUp/slipedown()...等等
代码量：以上效果，想要实现，代码量大
下面是我实现的一个幻灯片切换效果：
包括大图片切换、小图列表突出显示、文字跟随小图跑、
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <base href="<%=basePath%>"> 5 <title>animate实现幻灯片</title> 6 7 <link rel="stylesheet" type="text/css" href="animate.css" /> 8 <script type="text/javascript" src="jquery-1.8.3.js"> 9 </script> 10 11 <script type="text/javascript"> 12 var index=0; 13 var flag=true; 14 $(function(){ 15 $(".imgshow li:not(:first)").hide(); 16 $(".text li:not(:first)").hide(); 17 styleMe(".imglist li:eq("+index+")"); 18 change(index); 19 $(".imgshow").mouseover(function(){ 20 flag=false; 21 22 }); 23 $(".imgshow").mouseout(function(){ 24 flag=true; 25 26 }); 27 $(".imglist li").bind({ 28 mouseout:function(){ 29 flag=true; 30 },mouseover:function(){ 31 flag=false; 32 index=$(this).index(); 33 34 change(index); 35 },click:function(){ 36 flag=false; 37 styleMe($(this)); 38 index=$(this).index(); 39 change(index); 40 } 41 42 }); 43 44 setInterval(function(){ 45 46 if(flag){ 47 index=index+1; 48 if(index==5){ 49 index=0; 50 } 51 change(index) 52 } 53 54 55 56 57 58 },4000); 59 }); 60 //图片切换 61 function change(index){ 62 //图片 63 64 styleMe(".imglist li:eq("+index+")"); 65 $(".imgshow li:eq("+index+")") 66 .show().animate({opacity:'0.5'},300).animate({opacity:'1'},500) 67 .siblings() 68 .hide(); 69 //文本 70 var left=$(".imglist li:eq("+index+")").position().left+180; 71 //alert(left); 72 if(index==4){ 73 //200=ul初始位置180px +padding20px; 74 //获取有些问题，直接赋值 75 var width=480; 76 77 left=left-width; 78 } 79 $(".text").stop(true,true); 80 $(".text").animate({opacity:'0.7',marginLeft:left},700).animate({opacity:'1'},200); 81 // alert("index:"+index+";left:"+left+";width:"+width); 82 $(".text li:eq("+index+")") 83 .show() 84 .siblings() 85 .hide(); 86 87 88 //$(".text").css("margin-left",left); 89 90 91 } 92 function styleMe(doc){ 93 $(doc).stop(true,true); 94 $(doc).animate({marginTop:'-25px'},200).siblings().animate({marginTop:'0px'},400); 95 $(doc).addClass("mouse").siblings().removeClass("mouse"); 96 } 97 </script> 98 </head> 99 100 <body> 101 102 <div> 103 <ul class="imgshow"> 104 <li><img src="img/1.jpg" /></li> 105 <li><img src="img/2.jpg" /></li> 106 <li><img src="img/3.jpg" /></li> 107 <li><img src="img/4.jpg" /></li> 108 <li><img src="img/5.jpg" /></li> 109 110 </ul> 111 <ul class="imglist"> 112 <li><img src="img/1.jpg" /></li> 113 <li><img src="img/2.jpg" /></li> 114 <li><img src="img/3.jpg" /></li> 115 <li><img src="img/4.jpg" /></li> 116 <li><img src="img/5.jpg" /></li> 117 118 </ul> 119 <ul class="text"> 120 <li>电影十二生肖去景点</li> 121 <li>美国农庄公路</li> 122 <li>青山碧水</li> 123 <li>阿尔卑斯山下美丽的山庄</li> 124 <li>这是小羊肖恩嘛？太可爱了吧，好想拥有一只</li> 125 126 </ul> 127 128 </div> 129 130 </body> 131 </html>
css代码：
1 /*animate*/ 2 *{ 3 margin:0px; 4 padding:0px; 5 } 6 body{ 7 width:100%; 8 9 } 10 div{ 11 width:1000px; 12 margin:auto; 13 } 14 ul{ 15 width:1000px; 16 margin:auto; 17 list-style:none; 18 19 } 20 .imgshow img{ 21 height:600px; 22 width:1000px; 23 24 } 25 .mouse{ 26 /** border-bottom:30px solid green;**/ 27 background-color:#2F2F2F; 28 } 29 .imglist{ 30 top:480px; 31 margin-left:50px; 32 z-index:2; 33 position:absolute; 34 } 35 .imglist li{ 36 float:left; 37 padding:20px 10px; 38 display:block; 39 40 } 41 .imglist img{ 42 height:60px; 43 width:100px; 44 45 46 } 47 .text{ 48 width:auto; 49 top:430px; 50 margin-left:180px; 51 z-index:2; 52 position:absolute; 53 54 } 55 .text li{ 56 padding:20px 30px; 57 background-color:#2F2F2F; 58 color:#ccc; 59 font-size:14px; 60 61 }
效果图：
总结：
animate缺点：
每个动画必须演示完才能结束，这就导致如果频繁去使用这个方法，会导致延迟（实际上不是）
优点：
animate支持同一个容器的所有动作可以依次从第一个往下执行，这个特性我最喜欢！
个别缺点解决办法：
延迟可以使用document.stop("容器名");
