目前在学习Oracle数据库，由于刚接触，学校让练习练习HTML内容，就想起了老师以前提起过的animate方法

animate是jquery的一个方法，这个方法主要功能是能实现比较平滑的动态效果，所以你想做一个简单又不失美观的动态效果不如试试它

下面总结一下以前常用的幻灯片效果实现用的方法：

　　切换：show(time)/hide(time):刚接触Jquery的时候大家应该用的最多的就是这两个方法，我个人觉得这个方法太丑了，一瞬间消失，或者一瞬间出现

　　列表滚动：这个多数人会直接使用其css属性做，或者position().left。。。等等方法，也是直接就过去了，总觉得不高大上

　　fadein()/fadeOut():朦胧感

　　slipeUp/slipedown()...等等

　　代码量：以上效果，想要实现，代码量大

　　

　　下面是我实现的一个幻灯片切换效果：

　　　　包括大图片切换、小图列表突出显示、文字跟随小图跑、

　　

 <!DOCTYPE html>

 <html>

   <head>

     <base href="<%=basePath%>">

     <title>animate实现幻灯片</title>

     <link rel="stylesheet" type="text/css" href="animate.css" />

     <script type="text/javascript" src="jquery-1.8.3.js">

     </script>

     <script type="text/javascript">

         var index=0;

         var flag=true;

         $(function(){

             $(".imgshow li:not(:first)").hide();

             $(".text li:not(:first)").hide();

             styleMe(".imglist li:eq("+index+")");

             change(index);

             $(".imgshow").mouseover(function(){

                 flag=false;

             });

             $(".imgshow").mouseout(function(){

                 flag=true;

             });

             $(".imglist li").bind({

                 mouseout:function(){

                     flag=true;

                 },mouseover:function(){

                     flag=false;

                     index=$(this).index();

                     change(index);

                 },click:function(){

                     flag=false;

                     styleMe($(this));

                     index=$(this).index();

                     change(index);

                 }

             });

                 setInterval(function(){

                     if(flag){

                         index=index+1;

                         if(index==5){

                             index=0;

                         }

                         change(index)

                     }

                 },4000);

             });

     //图片切换

         function change(index){

             //图片

             styleMe(".imglist li:eq("+index+")");

             $(".imgshow li:eq("+index+")")

             .show().animate({opacity:'0.5'},300).animate({opacity:'1'},500)

             .siblings()

             .hide();

             //文本

             var left=$(".imglist li:eq("+index+")").position().left+180;

             //alert(left);

             if(index==4){

                 //200=ul初始位置180px +padding20px;

                 //获取有些问题，直接赋值

                var width=480;

                 left=left-width;

             }

             $(".text").stop(true,true);

             $(".text").animate({opacity:'0.7',marginLeft:left},700).animate({opacity:'1'},200);

         //    alert("index:"+index+";left:"+left+";width:"+width);

             $(".text li:eq("+index+")")

             .show()

             .siblings()

             .hide();

             //$(".text").css("margin-left",left);

         }

         function styleMe(doc){

             $(doc).stop(true,true);

             $(doc).animate({marginTop:'-25px'},200).siblings().animate({marginTop:'0px'},400);

             $(doc).addClass("mouse").siblings().removeClass("mouse");

         }

     </script>

   </head>

   <body>

     <div>

         <ul class="imgshow">

         <li><img src="img/1.jpg" /></li>

         <li><img src="img/2.jpg" /></li>

         <li><img src="img/3.jpg" /></li>

         <li><img src="img/4.jpg" /></li>

         <li><img src="img/5.jpg" /></li>

     </ul>

     <ul class="imglist">

         <li><img src="img/1.jpg" /></li>

         <li><img src="img/2.jpg" /></li>

         <li><img src="img/3.jpg" /></li>

         <li><img src="img/4.jpg" /></li>

         <li><img src="img/5.jpg" /></li>

     </ul>

     <ul class="text">

         <li>电影十二生肖去景点</li>

         <li>美国农庄公路</li>

         <li>青山碧水</li>

         <li>阿尔卑斯山下美丽的山庄</li>

         <li>这是小羊肖恩嘛？太可爱了吧，好想拥有一只</li>

     </ul>

     </div>

   </body>

 </html>

css代码：

 /*animate*/

 *{

     margin:0px;

     padding:0px;

 }

 body{

     width:100%;

 }

 div{

 width:1000px;

 margin:auto;

 }

 ul{

 width:1000px;

 margin:auto;

 list-style:none;

 }

 .imgshow img{

     height:600px;

     width:1000px;

 }

 .mouse{

 /**    border-bottom:30px solid green;**/

     background-color:#2F2F2F;

 }

 .imglist{

     top:480px;

     margin-left:50px;

     z-index:;

     position:absolute;

 }

 .imglist li{

     float:left;

     padding:20px 10px;

     display:block;

 }

 .imglist img{

         height:60px;

         width:100px;

 }

 .text{

     width:auto;

     top:430px;

     margin-left:180px;

     z-index:;

     position:absolute;

 }

 .text li{

     padding:20px 30px;

     background-color:#2F2F2F;

     color:#ccc;

     font-size:14px;

 }

效果图：

总结：

　　animate缺点：

　　　　每个动画必须演示完才能结束，这就导致如果频繁去使用这个方法，会导致延迟（实际上不是）

　　优点：

　　　　animate支持同一个容器的所有动作可以依次从第一个往下执行，这个特性我最喜欢！

　　个别缺点解决办法：

　　　延迟可以使用document.stop("容器名");

　　

　　

Jquery动画方法 jquery.animate()的更多相关文章

  1. jQuery动画方法

    下面介绍一些使用jQuery实现动画的方法: html中有如下代码: <button id="btn-box1">show</button> <but ...

  2. 一个老忘且非常有用的jquery动画方法 网页上卷

    $('html,body').animate({scrollTop:800+'px'},500) //网页上卷800像素 在半秒之内

  3. jquery 使用方法<转载>

    jquery 使用方法 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司 甚至把jQuery作为他们的官 ...

  4. [转] jquery 使用方法

    jquery 使用方法 jQuery是目前使用最广泛的javascript函数库.据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司 甚至把jQuery作为他们的官 ...

  5. css3动画和jquery动画使用中要注意的问题

    前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...

  6. jQuery自学笔记（三）：jQuery动画效果

    jQuery隐藏和显示: 使用 hide( ) 和 show( ) 方法来隐藏和显示 HTML 元素: 语法: $(selector).hide(speed,callback); $(selector ...

  7. jQuery效果之jQuery Color animation 色彩动画扩展

    jQuery 的动画方法(animate)支持各种属性的过渡,但是默认并不支持色彩的过渡,该插件正是来补足这一点! PS: 该插件支持 RGBA 颜色的过渡,但是请注意,IE8以下的版本不支持 RGB ...

  8. jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动

    首先我们看两个连写注释 第一个:   /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hi ...

  9. jQuery 滑动方法slideDown向下滑动元素

    通过 jQuery可以在元素上创建滑动效果,jQuery slideDown() 方法用于向下滑动元素. jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以 ...

随机推荐

  1. Temporary InMemory Tables [AX 2012]

    Temporary InMemory Tables [AX 2012] This topic has not yet been rated - Rate this topic Updated: Oct ...

  2. win7无法通过DHCP获得IP地址

    问题:win7无法通过DHCP获得IP地址(手动设置没有问题),但XP可以自动获取. 前些时候,某局域网反应部分WIN7系统无法正常从DHCP服务器(windows dhcp 服务器)获取ip地址,交 ...

  3. JavaEE基础（十八）/集合

    1.集合框架(Map集合概述和特点) A:Map接口概述 查看API可以知道: 将键映射到值的对象 一个映射不能包含重复的键 每个键最多只能映射到一个值 B:Map接口和Collection接口的不同 ...

  4. linux进程调度方法(SCHED_OTHER,SCHED_FIFO,SCHED_RR)

    转于:http://blog.csdn.net/maray/article/details/2900689 Linux内核的三种调度方法: 1,SCHED_OTHER 分时调度策略, 2,SCHED_ ...

  5. 算法心得2：关于k个最小和问题的思考

    问题描述如下: 有k个整数数组,各包含k个元素.在每个数组中取一个元素加起来,可以得到k^k个和.求这些和中最小的k个值(重复计算的算多次). 如果同时考虑这k个数组的取值情况,其复杂程度不言而喻,并 ...

  6. Android activity界面跳转动画

    实现activity界面跳转动画 1.在startActivity方法之后加入: overridePendingTransition(R.anim.pull_in_right, R.anim.pull ...

  7. js获取url值

    // 获取地址栏的参数数组 function getUrlParams() { var search = window.location.search; // 写入数据字典 var tmparray ...

  8. noi 2971 抓住那头牛

    2971:抓住那头牛 查看 提交 统计 提问 总时间限制:  2000ms 内存限制:  65536kB 描述 农夫知道一头牛的位置,想要抓住它.农夫和牛都位于数轴上,农夫起始位于点N(0<=N ...

  9. Poj(3686)，最小权匹配，多重匹配，KM

    题目链接 The Windy's | Time Limit: 5000MS | Memory Limit: 65536K | | Total Submissions: 4939 | Accepted: ...

  10. no branch 问题

    现象如下: lynn.feng:~/project/Git/M_MT6737_MP$ git branch -a* (no branch) a36_panasonic_l004 b36_panason ...