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. GO 键盘输入和打印输出

    键盘输入和打印输出 一.打印输出 1.1 fmt包 fmt包实现了类似C语言printf和scanf的格式化I/O.格式化verb('verb')源自C语言但更简单. 详见官网fmt的API:http ...

  2. java高并发系列 - 第5天:深入理解进程和线程

    进程 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,是操作系统结构的基础.程序是指令.数据及其组织形式的描述,进程是程序的实体. 进程具有的 ...

  3. 杂牌机搞机之旅最终章————刷入Xposed框架

    杂牌机搞机之旅最终章----刷入Xposed框架 recovery移植不成功,没办法,挂载分区好像挂载不上,所以,刷入magisk如果卡在开机屏,只能线刷解决..心累.. 所以,折腾完XPosed框架 ...

  4. 2018-8-10-win10-uwp-商业游戏-

    原文:2018-8-10-win10-uwp-商业游戏- title author date CreateTime categories win10 uwp 商业游戏 lindexi 2018-08- ...

  5. SQLi-LABS Page-4 (Challenges) Less-54-Less-65

    Less-54 union - 1 http://10.10.202.112/sqli/Less-54?id=-1' union select 1,2,group_concat(table_name) ...

  6. Qt 显示图片

    QImage qImag("img.jpg"); //qImag = qImag.scaled(width, height); //缩放图片 qImag = qImag.scale ...

  7. 模板引擎Jinja2的基本用法

    Flask提供的模板引擎为Jinja2,易于使用,功能强大.模板仅仅是文本文件,它可以生成任何基于文本的格式(HTML.XML.CSV.LaTex 等等). 它并没有特定的扩展名, .html 或 . ...

  8. CODING 告诉你硅谷项目经理的项目管理之道

    写在前面 优秀的项目管理者是怎么工作的,如何把一个研发团队的绩效激发到最大? 我们精心挑选了几篇硅谷科技公司研发管理者的 README 进行翻译. README 主要用来向团队成员展示项目管理者的工作 ...

  9. 【团队项目3】需求改进&系统设计

    一.需求 & 原型改进 1.针对课堂讨论环节老师和其他组的问题及建议,对修改选题及需求进行修改 根据用户反馈,我们针对如下问题做了修改: 问题1:如何保证机构是否是官方的?平台是否有监管? 修 ...

  10. SQL学习_SELECT

    查询列: SQL:SELECT name FROM heros 多列查询: SQL:SELECT name, hp_max, mp_max, attack_max, defense_max FROM ...