目前在学习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. Linux MTD系统剖析【转】

    转自:http://blog.csdn.net/lwj103862095/article/details/21545791 版权声明:本文为博主原创文章,未经博主允许不得转载. MTD,Memory ...

  2. Oracle：Authid Current_User使用

    由于用户拥有的role权限在存储过程是不可用的.遇到这种情况,我们一般需要显示授权,如grant create table to user;但这种方法太麻烦,有时候可能需要进行非常多的授权才能执行存储 ...

  3. ImageLoader 图片加裁

    // String picurl = article.cateLogo;// ImageLoader.getInstance().displayImage(picurl, holder.cate_Lo ...

  4. ecshop增加pc扫描二维码微信支付功能代码

    ecshop开发网站,如果没有手机版,又想通过微信支付,可以加入pc二维码扫描微信支付功能 工具/原料 ecshop商城系统,phpqrcode,WxPayPubHelper 公众号已申请微信支付 方 ...

  5. Ajax的基本语法

    //声明XMLHttpRequest var xmlHttp = null;   // 创建XMLHttpRequest对象兼容所有浏览器        function createXMLHttpR ...

  6. Javascript页面之间参数传递 （前端）

    一.来源:tongfang [系统管理员] --[系统管理] 的"SysLeftNavView.ascx.cs 用户插件 usercontrol 左侧菜单导航: <li>< ...

  7. java中的动态代理机制

    java中的动态代理机制 在java的动态代理机制中,有两个重要的类或接口,一个是 InvocationHandler(Interface).另一个则是 Proxy(Class),这一个类和接口是实现 ...

  8. 2016 ACM/ICPC Asia Regional Qingdao Online HDU5878

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=5878 解法:先保存,再二分查询~具体http://blog.csdn.net/coder_xia/arti ...

  9. ByteBuffer解析

    一.前言 前一篇文章我们介绍了Android中直播视频技术的基础大纲知识,这里就开始一一讲解各个知识点,首先主要来看一下视频直播中的一个重要的基础核心类:ByteBuffer,这个类看上去都知道了,是 ...

  10. 回车和换行在linux下和windows下

    今天,我总算搞清楚"回车"(carriage return)和"换行"(line feed)这两个概念的来历和区别了. 1.  在计算机还没有出现之前,有一种叫 ...