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. tf.contrib.slim模块简介

    原文连接:https://blog.csdn.net/MOU_IT/article/details/82717745 1.简介 对于tensorflow.contrib这个库,tensorflow官方 ...

  2. hive引擎的选择：tez和spark

    背景 mr引擎在hive 2中将被弃用.官方推荐使用tez或spark等引擎. 选择 tez 使用有向无环图.内存式计算. spark 可以同时作为批式和流式的处理引擎,减少学习成本. 问题& ...

  3. VS中常用C#代码段快速输入总结

    转自:https://blog.csdn.net/a980433875/article/details/12231673 Visual Studio 中有很多代码段都可以直接简写然后按TAB快速输入编 ...

  4. Nginx文章

    https://www.cnblogs.com/qfb620/p/5508468.html https://www.cnblogs.com/jiangwangxiang/p/8481661.html ...

  5. [20190522]DISABLE TABLE LOCK.txt

    [20190522]DISABLE TABLE LOCK.txt --//如果禁止table lock时,一些ddl操作会被禁止.但是我有点吃惊的是增加字段不受限制.--//通过测试说明问题. 1.环 ...

  6. ansible错误ImportError: No module named ansible.runner记录

    按着官网提供的安装ansible To configure the PPA on your machine and install ansible run these commands: $ sudo ...

  7. SRDC - ORA-30013: Checklist of Evidence to Supply (Doc ID 1682701.1)

    Action Plan 1. Execute srdc_db_undo_ora-30013.sql as sysdba and provide the spool output --srdc_db_u ...

  8. Python—基本数据类型

    核心数据类型: 数字(int整型.float浮点型.complex复数.bool布尔型) 字符串 str 列表(List) 元组(Tuple) 字典(Dictionary) 集合() 数字 整数,浮点 ...

  9. c++ 模板特化与局部特化

    c++ 模板特化与局部特化 模板的由来是要处理泛化,也就是任何类型都可以处理.但是泛化的同时,如果针对某种特殊的类型,又更加效率的处理方法.c++提供针对特殊的类型,可以定义不同的处理方法.针对某种特 ...

  10. [PHP] 持续交付Jenkins安装

    1.下载并运行 Jenkins下载 Jenkins.http://mirrors.jenkins.io/war-stable/latest/jenkins.war 打开终端进入到下载目录.运行命令 j ...