目前在学习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. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  2. jqGrid中选择的行的数据[转]

    如何获取jqGrid中选择的行的数据? 下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$(‘#gridTable’).jqGrid(‘getGridPa ...

  3. 为什么你要拒绝我 ——苹果AppStore被拒理由大全

    简而言之 截图中出现了Android 截图中出现了hack苹果的内容 评论中出现了"屌丝"等不雅词汇 App中包含谈论Android系统的内容 你修改了状态栏,不行 只有第三方登录 ...

  4. Wall Street English

    1月23号,报名Wall Street English!

  5. C#:插件、框架

    1.开源实体映射框架EmitMapper(http://www.cnblogs.com/wuhong/archive/2011/09/21/2184313.html) 2.ffmpeg.exe是一个源 ...

  6. 系统图片uri的问题

    调用系统图库会出现两种uri的问题,一个是在文件管理器中的图库中,获取到的地址为:content://media/external/images/media/972  这种格式 另外一种的是系统文件管 ...

  7. SQL中join的用法

    关于sql语句中的连接(join)关键字,是较为常用而又不太容易理解的关键字,下面这个例子给出了一个简单的解释 --建表table1,table2:create table table1(id int ...

  8. 【转】详细讲解Java中log4j的使用方法

    转载地址:http://www.233.com/Java/zhuangye/20070731/142625631.html 1.Log4j是什么? Log4j可以帮助调试(有时候debug是发挥不了作 ...

  9. python抓取中文网页乱码通用解决方法

    注:转载自http://www.cnpythoner.com/ 我们经常通过python做采集网页数据的时候,会碰到一些乱码问题,今天给大家分享一个解决网页乱码,尤其是中文网页的通用方法. 首页我们需 ...

  10. 实现的时钟（time）

    <!doctype html><html lang="en"><head> <script type="text/javascr ...