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# 异或

    遗忘的东西. 真的是很少用呀. 操作符为^ 简单来说就是相同为假(0),不同为真(1). 给一个小小的例子(密文) class Program { static void Main(string[] ...

  2. ABAP ALV显示前排序合并及布局显示

    有时候会有用户要求显示出来的ALV立即就是升序或者降序,或者是上下同一个字段值一样的情况显示一次,如 变为 这个时候内表用SORT有时候会不好用,可以使用函数 REUSE_ALV_GRID_DISPL ...

  3. C# Newtonsoft.Json 读取文件，返回json字符串

    第一种方法: public object getData2() { string content; using (StreamReader sr = new StreamReader(Server.M ...

  4. python BeautifulSoup 爬虫运行出现 exited with code -1073741571

    首先,exited with code -1073741571意思是栈溢出.具体可以看https://blog.csdn.net/vblittleboy/article/details/6613815 ...

  5. Initialize a Property After Creating an Object创建对象后初始化属性 即如何设置对象的默认值（EF）

    In this lesson, you will learn how to set the default value for a particular property of a business ...

  6. Nginx文章

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

  7. 学习：SpringCloud(一)

    微服务: 微服务是一种架构模式或者一种架构风格,提倡将单一应用程序划分成一组小的服务==独立部署==,服务之间相互配合.相互协调,每个服务运行于自己的==进程==中. 服务与服务间采用轻量级通讯,如H ...

  8. docker卷管理（四）

    什么是数据卷 overlay2存储卷 docker镜像是由多个只读层叠加而成,启动容器时,docker会加载只读镜像层,并在镜像栈顶部添加一个可写层 如果运行中的容器修改了现有的一个已存在文件,那该文 ...

  9. 如何下载Youtube上的视频， 字幕， MP3等资源， 方法简单直接！

    Youtube不用多说了吧,秒杀国内一众视频平台,没有之一, 既然关注Youtube说明大家对Youtube都是认同的.不用说4K,8K视频,比起国内一些伪4K, 真的良心, 就连广告也是5秒跳过, ...

  10. luoguP3431 [POI2005]AUT-The Bus

    安利系列博文 https://www.cnblogs.com/tyner/p/11565348.html https://www.cnblogs.com/tyner/p/11605073.html 做 ...