首页 > 代码库 > Jquery动画方法 jquery.animate()
Jquery动画方法 jquery.animate()
目前在学习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("容器名");
Jquery动画方法 jquery.animate()
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。