效果：

代码：

 <!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. 抢滩5G，哪些行业将受最大影响？

    抢滩5G,哪些行业将受最大影响? 中国工信部6月6日已正式向中国电信.中国移动.中国联通.中国广电发放5G商用牌照.中国成为继韩国.美国.瑞士.英国之后,第五个宣布5G商用的国家. 这次颁发牌照,比计 ...

  2. 我的第一个 Windows 窗口程序（1）

    一般来说,构建一个 Windows 程序可以分为如下几个步骤: 定义窗口类(WNDCLASS) 注册窗口类(RegisterClass) 创建窗口(CreateWindow) 更新显示窗口(Updat ...

  3. Windows环境下制作Ubuntu的U盘启动工具

    Windows用户想要尝试一下Ubuntu或其他Linux系统?最简单的方法就是使用VMware Workstation,只是虚拟机会真实占用内存,如果你的电脑内存8G及以上可以试试.内存偏小,或者觉 ...

  4. alg--分治法

    分治--分而治之, 把大的问题分成n个小的问题,分别处理,然后汇总小问题的结果. 具体介绍可以参考这位大哥的blog: https://www.cnblogs.com/steven_oyj/archi ...

  5. C#通过SendMessage发送消息，改变其他程序的下拉框控件（ComboBox）的值

    IntPtr cbh= new IntPtr(handle); //ComboBox的句柄 SendMessage(cbh, 0x014D, new IntPtr(-1), "需要选中的下拉 ...

  6. Elasticsearch 入门 - Exploring Your Cluster

    The REST API Cluster Health ( http://localhost:9200/ ) curl -X GET "localhost:9200/_cat/health? ...

  7. yii AR 模式操作

    Bat::find() ; //返回查询实例 Bat::find()->one() //返回一条数据 Bat::find()->all(); //返回所有数据 Bat::find()-&g ...

  8. Vijos—— T 1359 Superprime

    https://vijos.org/p/1359 描述 农民约翰的母牛总是生产出最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的质数肋骨,是因 ...

  9. C++表达式求值（利用数据结构栈）

    唉,刚刚用C++又又一次写了一个较完好的表达式求值程序,最后精简后程序还不到100行.这不经让我 想到了大一上学期刚学c语言时自己费了好大的劲,写了几百行并且功能还不是非常齐全(当时还不能计算有括号的 ...

  10. ASP.Net MVC – What are the uses of Display, DisplayName, DisplayFormat and ScaffoldColumn attributes

    http://www.codeproject.com/Articles/775220/ASP-Net-MVC-What-are-the-uses-of-Display-DisplayNa?utm_so ...