效果：

代码：

 <!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. WP 图片加载时显示加载中

    private BitmapImage srcimage = new BitmapImage(); public MainPage() { InitializeComponent(); progres ...

  2. Here comes Treble: A modular base for Android

    On the Android team, we view each dessert release as an opportunity to make Android better for our u ...

  3. centos 6.10 永久修改主机名

    1> 修改配置文件 vim /etc/sysconfig/network #HOSTNAME=localhost.localdomain HOSTNAME=tomcat   2> 修改ho ...

  4. EL表达式中，param和requestScope的区别

    在看param和requestScope之前,不妨先了解下在java下request的情况: 1. request对象通常用来接收客户端提交到服务端的数据,如:在servlet或者action中可以用 ...

  5. el7上的开机自动执行脚本

    /etc/rc.local 是 /etc/rc.d/rc.local的软连接 默认, /etc/rc.local 是有可执行权限的, 只要 给 /etc/rc.d/rc.local 加上可执行权限即可 ...

  6. Node笔记(2)

    写一个可以生成多层级文件夹的函数 const fs = require('fs'); const path = require('path'); function mkdirs (pathname,c ...

  7. Vue学习之路第十四篇：v-for指令中key的使用注意事项

    1.学前准备: JavaScript中有一个方法:unshift() ,其作用是向数组的开头添加一个或更多元素,并返回新的长度.该方法的第一个参数将成为数组的新元素 0,如果还有第二个参数,它将成为新 ...

  8. JavaScript进阶【二】JavaScript 严格模式(use strict)的使用

    /*** *使用严格模式的原因: * ①:消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; ②:消除代码运行的一些不安全之处,保证代码运行的安全: ③:提高编译器效率,增加运行 ...

  9. Ajax发送GET和POST请求案例

    使用ajax实现菜单联动 通常情况下,GET请求用于从服务器上获取数据,POST请求用于向服务器发送数据. 需求:选择第一个下拉框的值,根据第一个下拉框的值显示第二个下拉框的值 首先使用GET方式. ...

  10. shell文本过滤编程（十一）：paste命令

    [版权声明:转载请保留出处:blog.csdn.net/gentleliu. Mail:shallnew at 163 dot com] 从字面上能够看出.paste命令和cut命令功能相反,cut命 ...