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. 100道MySQL常见面试题总结，看完直接收藏

    前言 本文主要受众为开发人员,所以不涉及到MySQL的服务部署等操作,且内容较多,大家准备好耐心和瓜子矿泉水. 前一阵系统的学习了一下MySQL,也有一些实际操作经验,偶然看到一篇和MySQL相关的面 ...

  2. oracle学习笔记（二十一） 程序包

    程序包 之前我们调用的dbms_output.put_line(''),dbms_output就是一个程序包 程序包创建语法 1. 声明程序包 --声明程序包中的过程,函数,自定义的类型 --程序包里 ...

  3. Hive表导出成csv文件

    命令 hive -e " set hive.cli.print.header=true; #将表头输出 select * from data_table where some_query_c ...

  4. Java日期时间API系列5-----Jdk7及以前的日期时间类TimeUnit在并发编程中的应用

    TimeUnit是一个时间单位枚举类,主要用于并发编程,时间单元表示给定粒度单元的时间持续时间,并提供实用程序方法来跨单元转换,以及在这些单元中执行计时和延迟操作. 1.时间单位换算 (1)支持的单位 ...

  5. TOTP算法实现二步验证

    概念 TOTP算法(Time-based One-time Password algorithm)是一种从共享密钥和当前时间计算一次性密码的算法. 它已被采纳为Internet工程任务组标准RFC 6 ...

  6. centOS服务器基本命令

    1.卸载/安装mySQL:(因为我是该服务器的管理员,所以这些命令都不用在前面加sudo) yum remove mysqlyum install mysql 2.进入根目录 cd / 3.查看cen ...

  7. JVM 参数配置

    JAVA_OPTS="-server -Xms2048m -Xmx2048m -Xmn512m -Xss256k -XX:PermSize=256m -XX:MaxPermSize=256m ...

  8. Java的包

    Java 包 Java面向对象的核心的概念:类.接口.抽象类.对象:[主体] 包的定义: 指的是一个程序的目录,在最早的时候,如果要开发一个程序,只需要定义一个Java文件,而后在这个文件中编写所需要 ...

  9. 重启电脑 wamp图标是橙色（未变绿）

    记录一个错误: 修复系统漏洞后,重启电脑,wamp没有开机自启动,手动启动后发现,图标是大红色变成了橙色,也就是服务未完全启动(1/2)状态. ??? 但是我其实也不知道是哪个服务(Apache/My ...

  10. [Linux] centos6.5升级安装的supervisor

    因为我要用它来管理多个PHP进程去执行任务,在默认版本下的配置多个子进程不起作用 默认版本的supervisor版本比较低2.1.9,对于运行多个子进程貌似有问题,最新版的supervisor4.1的 ...