目前在学习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. PHP将多张小图拼接成一张大图

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...

  2. hbase 停止regionserver

    每个regionserver节点可以自由启动或停止,可以不随hbase整体一起. 停止后regionserver上的数据会被移到其他regionserver上,不影响hbase的使用.   停止reg ...

  3. c# 反射列子

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  4. 山东理工大学第七届ACM校赛-飞花的线代 分类： 比赛 2015-06-26 10:29 10人阅读 评论(0) 收藏

    飞花的线代 Time Limit: 1000ms Memory limit: 65536K 有疑问?点这里^_^ 题目描述 飞花壕的线代一直非常的壕(好),线代考试每次都是全班第一.一次,飞花壕在预习 ...

  5. Apache Common-pool2对象池分析和应用

    Apache Common-pool2包提供了一个通用的对象池技术的实现.可以很方便的基于它来实现自己的对象池,比如DBCP和Jedis他们的内部对象池的实现就是依赖于Common-pool2. 对象 ...

  6. Get与Post的一些总结

    1.GET请求的数据会附在URL之后,POST把提交的数据则放置在是HTTP包的包体中. 2."GET方式提交的数据最多只能是1024字节这句话是错误的 URL不存在参数上限的问题,HTTP ...

  7. bzoj 2818: Gcd GCD(a,b) = 素数

    2818: Gcd Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 1566  Solved: 691[Submit][Status] Descript ...

  8. PHP处理数据--excel与scv与json

    今天要处理两个excel.两个循环嵌套验证重复性.所以写了几个函数来处理20亿次的数据量. 一.把excel读出来,保存为json.利用phpexcel插件: <?php header(&quo ...

  9. 深入理解C语言中的指针与数组之指针篇

    转载于http://blog.csdn.net/hinyunsin/article/details/6662851     前言 其实很早就想要写一篇关于指针和数组的文章,毕竟可以认为这是C语言的根本 ...

  10. SqlSever基础 right函数 从右边开始，截取字符串

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...