效果：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{padding: 0px;margin: 0px;}

         li{

             width: 80px;height:300px;

             float: left;overflow: hidden;

             list-style: none;

         }

     </style>

     <script type="text/javascript "src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

 </head>

 <body>

 <script >

     $(function () {

         $("ul li").mouseover(function (){

             $(this).stop().animate({width:350},500)//stop函数：停止当前正在运行的动画

             //siblings:遍历

             $(this).siblings().stop().animate({width:80},500)//anmate：500ms后将其width变为80px；

         })

     })

 </script>

 <div>

     <ul>

     <li style="width: 350px"><img src="1.jpg"></li>

     <li><img src="2.jpg"></li>

     <li><img src="3.jpg"></li>

     <li><img src="4.jpg"></li>

     <li><img src="5.jpg"></li>

     </ul>

 </div>

 </body>

 </html>

jquery应用实例1：手风琴特效的更多相关文章

  1. 一款点击图片进行无限循环的jquery手风琴特效

    一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...

  2. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

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

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

  4. jQuery特效手风琴特效 手写手风琴网页特效

    今天写一个简单的手风琴效果,不用插件,利用强大的jQuery,写一个手风琴效果. 页面预览,请点击这里预览:  手风琴预览 案例分析: html结构 就是一个大盒子里面放着5个li,每个li的小小是2 ...

  5. jquery实现多条件筛选特效代码分享

    本文实例讲述了jquery实现多条件筛选特效.分享给大家供大家参考.具体如下:jquery实现的多条件搜索表单带日期选择表格表单效果源码,是一段实现了多个条件筛选搜索的特效代码,多条件拥有时间.地点. ...

  6. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  7. jQuery UI 实例 – 切换(Toggle)

    toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数. toggle()是一个特殊的事件函数,用于为匹配元素的click事件绑定多个事件处理函数.每次触发click事件时,togg ...

  8. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  9. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  10. jQuery Ajax 实例 ($.ajax、$.post、$.get)

    jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...

随机推荐

  1. nodejs supervisor安装

    使用supervisor提高nodejs调试效率 用超级用户运行npm -g install supervisor命令,说是顺 >$ sudo npm -g install supervisor ...

  2. C# 4.0新加特性

    协变和逆变 这个在C#2.0中就已经支持委托的协变和逆变了,C#4.0开始支持针对泛型接口的协变和逆变: IList<string> strings = new List<strin ...

  3. Http状态码大全（200、404、500等）

    基本涵盖了所有问题 HTTP 400 – 请求无效HTTP 401.1 – 未授权:登录失败HTTP 401.2 – 未授权:服务器配置问题导致登录失败HTTP 401.3 – ACL 禁止访问资源H ...

  4. dll文件：关于MFC程序不能定位输入点

    问题:无法定位程序输入点到动态链接库上...... 过程:找完整个工程文件夹: APS为资源文件: resource.h为定义文件: 完全复制 除主文件以外的所有文件,程序可用: 在主程序框Cpp文件 ...

  5. 00--C++牛人的博客

    那些C++牛人的博客 这篇文章来自转载,转载的网址找不到了,   如果有人知道,可以在下面评论,   非常感谢,更感谢原作者. 现整理收集C++世界里那些“牛人”的个人博客.凡三类:一是令人高山仰止的 ...

  6. Java中成员变量和局部变量区别

    在类中的位置不同 重点 成员变量:类中,方法外 局部变量:方法中或者方法声明上(形式参数) 作用范围不一样 重点 成员变量:类中 局部变量:方法中 初始化值的不同 重点 成员变量:有默认值 局部变量: ...

  7. BZOJ 1266: [AHOI2006]上学路线route Floyd_最小割

    十分简单的一道题. 图这么小,跑一边 Floyd 就得到第一问最短路径的答案. 考虑第二问怎么求:我们可以先将最短路径组成的图从原图中抽离出来,构成新图 $G$. 我们发现,只要 $G$ 的起点与终点 ...

  8. Python数据分析4------------数据变换

    1.简单变换: 开方.平方.对数等 2.数据规范化: (1)离差标准化(最小最大标准化):消除量纲(单位)影响以及变异大小因素的影响. x1=(x-min)/(max-min) 代码:data1=(d ...

  9. C++进阶 STL(2) 第二天 一元/二元函数对象、一元/二元谓词、stack容器、queue容器、list容器(双向链表)、set容器、对组、map容器

    01 上次课程回顾 昨天讲了三个容器 string  string是对char*进行的封装 vector 单口容器 动态数组 deque(双端队列) 函数对象/谓词: 一元函数对象: for_each ...

  10. HDU 5322 Hope (分治NTT优化DP)

    题面传送门 题目大意: 假设现在有一个排列,每个数和在它右面第一个比它大的数连一条无向边,会形成很多联通块. 定义一个联通块的权值为:联通块内元素数量的平方. 定义一个排列的权值为:每个联通块的权值之 ...