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("容器名");

　　

　　

posted @ 2014-11-09 20:27  非凡攻城师  阅读(695)  评论(0)  编辑  收藏  举报