目前在学习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. IBatisNet Demo （升级from 1.1）

    sqlMap.config, 要修改provider的设置 <providers resource="providers.config"/> <database& ...

  2. Serialize Documents with the C# Driver

    1.介绍 该文档是1.8版本的C#驱动. 本节教程讨论C#类和BSON文档之间的序列化和反序列化.序列化是将对象映射成一个可以存储在MongoDB中的BSON文档的过程,反序列化是从一个BSON文档重 ...

  3. 【jqGrid for ASP.NET MVC Documentation】.学习笔记.6.分层

    1 两级分层 每个父 grid 的行,都能有子 grid .这被叫做 层次,它用来显示相关的 表,主信息 –> 明细信息等. } 一旦你为 父子 grid 都定义了 Models ,下一步就是设 ...

  4. git 冲突

    git中冲突会用特殊的标记 (<<<<<<<=======>>>>>>>) 特殊标记<<<< ...

  5. oracle nvl和nvl2的区别

    一直用oracle nvl函数,最近发现还有一个nvl2函数: nvl(a,b) 如果a不为null 则返回a,如果a为null则返回b; nvl2(a,b,c) ,如果a不为null 则返回b,如果 ...

  6. http协议了解

    在web应用中,服务器把网页的HTML代码发送给浏览器,让浏览器显示出来,浏览器和服务器之间的传输协议就是HTTP协议.HTTP是在网络上传输HTML的协议,用于浏览器和服务器之间的通信. 一个网页打 ...

  7. 最小生成树--Prim算法，基于优先队列的Prim算法，Kruskal算法，Boruvka算法，“等价类”UnionFind

    最小支撑树树--Prim算法,基于优先队列的Prim算法,Kruskal算法,Boruvka算法,“等价类”UnionFind 最小支撑树树 前几节中介绍的算法都是针对无权图的,本节将介绍带权图的最小 ...

  8. 利用Spire for .NET实现办公自动化——Spire.Doc

    今天研究了一下E-ICEBLUE公司的Spire for .NET系列产品.我们可以通过利用这个系列的dll库文件轻松的实现办公自动化的需求,而且不需要安装相应的办公软件.有关于Spire .NET系 ...

  9. 编译器错误消息: CS0016: 未能写入输出文件“c:/Windows/Microsoft.NET/Framework/v2.0.50727/....dll”--“拒绝访问。

    错误如下: “/”应用程序中的服务器错误. 编译错误 说明: 在编译向该请求提供服务所需资源的过程中出现错误.请检查下列特定错误详细信息并适当地修改源代码. 编译器错误消息: CS0016: 未能写入 ...

  10. MD5签名方法

    /** * md5签名 * @param plainText 要签名的字符串 * @param enc 要编译的格式 gbk:utf-8 * @return */ public static Stri ...