效果：

代码：

 <!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. Wireshark抓本地回环

    最近正好要分析下本机两个端口之间通信状况.于是用wireshark抓包分析.对于本地回环要进行一些特殊的设置. 1.通过“运行”---“cmd” 输入“route add [本机IP]mask 255 ...

  2. 开发一个 App 有多难？说出来你可能不信！

    上图为程序员客栈儿童类视频APP 1.开发一个APP有多难?说实话,单纯地从开发来说,开发一个APP没有那么难.如果一款APP的基本功能点确定了,开发时间一般为1-2个月就完成了,费用大约5-10万的 ...

  3. 创建一个dynamics CRM workflow (一) - Introduction to Custom Workflows

    Workflow: Use this process to model and automate real world business processes. These processes can ...

  4. Delphi中实现文件拷贝的三种方法

    1．调用API函数procedure CopyFile(FromFileName,ToFileName:string);varf1,f2:file;BeginAssignFile(f1,FromFil ...

  5. 路飞学城Python-Day142

    第2节:UA身份伪装 反爬机制 User-Agent:请求载体的身份标识 通过不同的手段的当前的请求载体是不一样的,请求信息也是不一样的,常见的请求信息都是以键和值的形式存在 浏览器的开发者工具 Ne ...

  6. vue的计算属性get和set

    1.计算属性是用来存储数据,但具有以下几个特点: a.数据可以进行逻辑处理操作. b.对计算属性中的数据进行监视. 2.计算属性和普通属性的区别: a.计算属性是基于它的依赖进行更新的,只有在相关依赖 ...

  7. redis 安装成功后外部服务器链接不上

    1.reids服务器的6379端口telnet不通 2. 查看reids进程和端口,都是存在的.只是ip地址是127.0.0.1而不是0.0.0.0,只是本机能使用 3.查找redis的配置文件red ...

  8. python之UnittTest模块

    一. UnitTest单元测试框架 1.1概述 unittest原名为PyUnit,是由java的JUnit衍生而来.单元测试是对程序中最小的可测试模块(函数)来进行测试:对于单元测试,需要设置预先条 ...

  9. input标签处理多文件上传

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  10. Project Euler 29 Distinct powers（ 大整数质因数分解做法 + 普通做法 ）

    题意: 考虑所有满足2 ≤ a ≤ 5和2 ≤ b ≤ 5的整数组合生成的幂ab: 22=4, 23=8, 24=16, 25=3232=9, 33=27, 34=81, 35=24342=16, 4 ...