animate的手风琴效果

     <style type="text/css">

         * {

             margin: 0;

             padding: 0;

         }

         ul{

             list-style: none;

         }

         .wrap {

             width: 1020px;

             margin: 100px auto 0;

         }

         .wrap li{

             width: 200px;

             height: 400px;

             float: left;

         }

     </style>

 </head>

 <body>

 <div class="wrap">

     <ul>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

     </ul>

 </div>

 </body>

 </html>

 <script src="jquery-1.11.1.min.js"></script>

 <script type="text/javascript">

     var  list = $("ul li");

     list.each(function(index,item){

         $(this).css('background','url(images/'+ (index + 1)+'.jpg)');

         $(this).mouseenter(function(){

             $(this).stop().animate({width:600},1000).siblings().stop().animate({width:100},1000)

         })

         $(this).mouseleave(function(){

             list.stop().animate({width:200},1000);

         })

     })

 </script>

手风琴效果 animate的更多相关文章

  1. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  2. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

  3. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  4. jQuery插件实例四：手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  5. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  6. js实现手风琴效果

    之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...

  7. jquery横向手风琴效果2

    <!doctype html> <html> <head> <meta charset="utf-8"> <script ty ...

  8. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

随机推荐

  1. C++入门到理解阶段二基础篇(4)——C++运算符

    目录 算术运算符(进行四则运算) 赋值运算符(表达式的值赋给变量) 比较运算符(表达是比较,返回一个真值或假值) 逻辑运算符(返回表格式的结果真或假) 位运算符 杂项运算符 C++ 中的运算符优先级 ...

  2. PHP框架 fastadmin 根据条件判断字段的显示隐藏

    首先,因为fastadmin的JS里面字段不支持function函数  里面只能填false或true,不能动态判断显示隐藏, 后面通过看文档发现能在表格初始化的地方判断  如图,就可以实现根据lin ...

  3. Disruptor系列（三）— 组件原理

    前言 前两篇文章都是从github wiki中翻译而来,旨在能够快速了解和上手使用Disruptor.但是为了能够掌握该技术的核心思想,停留在使用层面还远远不够,需要了解其设计思想,实现原理,故这篇从 ...

  4. RabbitMQ Node.js 示例

    RabbitQM 处理和管理消息队列的中间人(broker).可简单理解为邮局,你在程序中写好消息,指定好收件人,剩下的事件就是 RabbitMQ 的工作了,它会保证收件人正确收到邮件. 任何发送邮件 ...

  5. 在C#中使用Panel控件实现在一个窗体中嵌套另一个窗体

    在C#中使用Panel控件实现在一个窗体中嵌套另一个窗体 在C#中使用Panel控件实现在一个窗体中嵌套另一个窗体ShowAllPage sAllPage = new ShowAllPage();   ...

  6. JS实现根据两点位置的经纬度获取距离

    // 经纬度转换成三角函数中度分表形式. function rad(d) { return d * Math.PI / 180.0; } // 根据经纬度计算距离,参数分别为第一点的纬度,经度:第二点 ...

  7. java基础(32):类加载、反射

    1. 类加载器 1.1 类的加载 当程序要使用某个类时,如果该类还未被加载到内存中,则系统会通过加载,连接,初始化三步来实现对这个类进行初始化. 加载 就是指将class文件读入内存,并为之创建一个C ...

  8. Python爬虫反反爬：CSS反爬加密彻底破解！

    刚开始搞爬虫的时候听到有人说爬虫是一场攻坚战,听的时候也没感觉到特别,但是经过了一段时间的练习之后,深以为然,每个网站不一样,每次爬取都是重新开始,所以,爬之前谁都不敢说会有什么结果. 前两天,应几个 ...

  9. Python 3 行代码 5 秒抠图的 AI 神器，根本无需 PS

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 苏克1900 PS:如有需要Python学习资料的小伙伴可以加点击下 ...

  10. android studio 菜单中的app运行按钮上有个叉号，原因与解决办法（自己去百度）

    http://blog.csdn.net/sz0268/article/details/51706397 : 在Android studio写代码中,直接建立项目,写代码然后运行是不会一般是不会出现这 ...