效果：

代码：

 <!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. vc++创建窗体

    //创建窗口,一般分为四步 /*1 WinMain函数的定义 2 创建一个窗口 3 编写消息循环 4 编写窗口过程函数*/ #include <windows.h> //包含windows ...

  2. Javase 简单练习

    public class Test10 { public static void main(String[] args) { System.out.println("------------ ...

  3. python与图灵机器人交互（ITCHAT版本）

    #!/usr/bin/env python#-*- coding:utf-8 -*- @Author : wujf @Time:2018/9/5 17:42import requestsimport ...

  4. jemeter参数化读取文件

    1.新建一个123.csv文件 如图 2.添加http请求 3.添加一个查看结果树 二.通过函数助手 (1)打开函数助手 ......... 在json属组中引入变量  这是别人参考的

  5. 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

    // DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...

  6. 基于【SpringBoot】的微服务【Jenkins】自动化部署

    最近,也是抽空整理了一些在工作中积累的经验,通过博客记录下来分享给大家,希望能对大家有所帮助: 一.关于自动化部署 关于自动化部署的优点,我就不在这里赘述了:只要想想手工打包.上传.部署.重启的种种, ...

  7. Acdream A - Unique Attack

    A - Unique Attack Time Limit: 6000/3000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others)   ...

  8. 转-----------------------js window.open() 操作

    <% if request("infoid")<>"" then set rs=conn.execute("select * fro ...

  9. HelloWorld编译正常运行报noclassdeffounderror

    修改环境变量classpath: 原理: classpath是搜索java类库的路径:当你输入命令“java HelloWorld“时,会根据classpath寻找HelloWorld.class:一 ...

  10. HDU 3306

    先转一些   http://www.cnblogs.com/frog112111/archive/2013/05/19/3087648.html Fibonacci数列:F(0)=1 , F(1)=1 ...