<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title>手风琴效果</title>

     <style>

         .accordion>.title{

             background:#eee; border:1px solid #aaa;

             padding:6px; cursor:pointer;

             font-size:1.5em; font-weight:bold;

         }

         .accordion>.content{ overflow:hidden;

             border:1px solid #aaa;

         }

         .fade{/*高为0，透明度为0, transition*/

             height:0; opacity:0; padding:0;

             transition:all 1s linear;

         }

         .in{/*高为140px, 透明度1*/

             height:140px; opacity:1; padding:6px;

         }

     </style>

 </head>

 <body>

 <div class="accordion">

     <div class="title" >西游记简介:</div>

     <div class="content">

         <p>

             <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptatibus necessitatibus quisquam molestias voluptas? A libero exercitationem fugiat officiis veritatis. Officiis cumque provident velit omnis inventore sed aspernatur voluptatum consectetur.</span>

             <span>Esse molestias illo earum illum consectetur veniam dolore vel nihil ducimus alias maxime officia adipisci odio temporibus aperiam eligendi beatae hic accusantium quasi quo minus reprehenderit facere debitis aspernatur provident.</span>

             <span>Natus voluptatem velit debitis aspernatur sapiente aliquid dolore delectus possimus molestiae sequi est quasi pariatur perspiciatis minus qui nulla praesentium magni error rem provident assumenda culpa distinctio ratione quam numquam.</span>

         </p>

     </div>

     <div class="title">水浒传简介:</div>

     <div class="content">

         <p>

             <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis sint dolore molestias enim voluptates iure ipsum nostrum cupiditate quisquam labore neque quia ad omnis eum quaerat. Distinctio blanditiis eum illum.</span>

             <span>Porro iure placeat odit beatae reiciendis doloribus sit ex sed ratione nihil expedita eos minus error natus quasi molestias soluta a totam. Eligendi enim aspernatur officiis consequuntur expedita debitis ea.</span>

             <span>Molestias eius tempora nam recusandae iusto cum laboriosam! Neque eaque rem asperiores quos est facere quas repellendus numquam incidunt itaque alias blanditiis qui quae in odit velit minus! Quasi quam.</span>

         </p>

     </div>

     <div class="title">红楼梦简介:</div>

     <div class="content">

         <p>

             <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae similique voluptate quisquam optio consequatur ex fugit aliquam obcaecati enim unde. Soluta id dolorum at eligendi animi officia quae iste nulla!</span>

             <span>Eveniet ad repellendus quisquam rem quas qui expedita culpa odio nihil nesciunt aut eius assumenda recusandae dicta inventore quos dolor adipisci corrupti incidunt veritatis! Repellendus sint eius quisquam quaerat ad.</span>

             <span>Esse nobis sequi doloribus quis totam in. Fuga sapiente sed quibusdam beatae ducimus vero quae eaque quod suscipit cupiditate perspiciatis voluptatem voluptatum itaque laboriosam nemo ullam pariatur eligendi nisi asperiores.</span>

         </p>

     </div>

     <div class="title">三国简介</div>

     <div class="content">

         <p>

             <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ducimus asperiores voluptatem mollitia reprehenderit repudiandae laboriosam a nulla tempora. Voluptates autem explicabo fuga eum nemo obcaecati tenetur. Assumenda aspernatur ad!</span>

             <span>Iure doloribus consequatur soluta velit est quas temporibus ut tempora quia voluptatum ex aliquam maxime ea consectetur minus autem reprehenderit eum voluptatibus facilis ad. Corporis veniam atque mollitia aperiam magnam.</span>

             <span>Enim incidunt quod commodi nesciunt officia mollitia nulla ut cum dicta quidem earum nihil ab architecto beatae velit fugit qui sed quo rem cumque at adipisci laudantium iste eos dolorem.</span>

         </p>

     </div>

 </div>

 <script src="javascript/jquery-1.11.3.js"></script>

 <script>

     //为class为accordion的父元素添加事件代理，只有class为title的元素CIA响应事件:

     $(".accordion").on("click",".title",function(e){

         //获得目标元素

         var $target=$(e.target);

         //找到目标元素的下一个兄弟元素,设置其切换伸缩效果

         $target.next().slideToggle(1000);

     })

 </script>

 </body>

 </html>
 动画

 高级函数:基于底层函数又进行了封装

 两大块:简化版的动画函数和万能动画函数

 简化版动画函数

 显示/隐藏$().show;  $(...).hide();

   强调:无参数的show()/hide()使用的是display属性

     瞬间隐藏和显示

     动画参数:speed：

     2种:1.三档: fast normal slow  慢中快

             2.用毫秒数自定义

 动画的速度变化:参数:easing：linear线性变化 swing摇摆属性先加速后减速

 伸缩/折叠slideUp向上   slideDown向下  slideTogger()切换

jQuery-手风琴伸缩效果的更多相关文章

  1. jQuery照片伸缩效应，这不是一个简单的图像缩放，它不影响其它元素的布局

    之前在网上看到这样的效果,但我没有收藏夹网址,后来被我不知道如何来实现这种效果. 如今,互联网已收集有关专门.真是功夫不负有心人,被我发现. 我也努力过自己尝试着写: 但仅仅是单纯的图片放大.并且还影 ...

  2. jQuery UI -- Repeater & 手风琴(Accordion)效果

    jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...

  3. jQuery实际案例③——手风琴的效果

    如图,用最简单的方式实现手风琴的效果,核心,就是通过改变自身即鼠标移上去的那张图的width,与其他的width就可,但是需要用animate,先改变自己的width,再改变其他的.

  4. bootstrap-简洁实用的jQuery手风琴插件

    前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...

  5. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

  6. jQuery手风琴菜单！！！！

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  7. jQuery手风琴制作

    jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...

  8. jQuery手风琴的制作！！

    jQuery手风琴的制作 首先我们先来做一个简单的jQuery的效果图 效果图 如下: css代码 如下: <style type="text/css" media=&quo ...

  9. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

随机推荐

  1. 内部排序->插入排序->其它插入排序->2-路插入排序

    文字描述 在折半插入排序的基础上进行改进, 另设一个和待排序序列L相同的数组D, 首先将L[1]赋值给D[0], 数组D中数据是已经排好序的, first指向最小值下标,final指向最大值下标.初始 ...

  2. ORACLE DB体系结构

    . 实例:一组oracle后台进程.线程以及一个共享内存区. 连接:用户进程和实例之间的通信 会话:用户通过用户进程与实例建立的特定连接 参数文件:包含控制文件的位置和名称 分为pfile和spfil ...

  3. BZOJ1280 Emmy卖猪pigs 网络流

    正解:网络流 解题报告: 传送门! 我网络流的基础题都还麻油做完就来做这个了,,,wsl,,, 首先想下最基础的构图方法 不难想到把猪圈和顾客分别当做节点,然后新建一个源点和汇点 然后考虑怎么连边,首 ...

  4. AT2046 Namori 图论

    正解: 解题报告: 传送门! 首先看数据范围可以发现要么是棵树要么是个奇环要么是个偶环 然后就分类讨论分别看下这几个情况 首先是棵树的 首先可以想到树的情况就是个二分图,所以不妨把颜色重定义,让奇数层 ...

  5. Navigator is deprecated and has been removed from this package

    报错:'Navigator is deprecated and has been removed from this package. It can now be installed ' +     ...

  6. 004-restful应用构建、分布式会话、测试工具简介

    一.概述 什么是rest(表述性状态转移,Representational State Transfer)是一种架构风格.他定义了创建可扩展Web服务的最佳实践. 1.Richardson成熟度模型 ...

  7. 给Access数据库文件减肥

    原理:数据文件和普通文件在硬盘上的存放方式不一样,你清空了表里的数据,但数据库里数据没了,但该数据的位置还在.就好比一个班里的学生都离开了教室,教室没有人了,但学生的座位还在一样(哈哈,这个比喻不是很 ...

  8. python的__all__

    用来暴露接口 控制 from xxx import * 的行为 代码中当然是不提倡用 from xxx import * 的写法的,但是在 console 调试的时候图个方便还是很常见的.如果一个模块 ...

  9. 关于运行python脚本产生__pycache__

    是什么? 用python编写好一个工程,在第一次运行后,总会发现工程根目录下生成了一个__pycache__文件夹,里面是和py文件同名的各种 *.pyc 或者 *.pyo 文件. python脚本编 ...

  10. [py]软件编程知识骨架+py常见数据结构

    认识算法的重要性 - 遇到问题? 学完语言,接到需求,没思路? 1.学会了语言,能读懂别人的代码, 但是自己没解决问题的能力,不能够把实际问题转换为代码,自己写出来.(这是只是学会一门语言的后果),不 ...