jQuery-手风琴伸缩效果
<!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-手风琴伸缩效果的更多相关文章
- jQuery照片伸缩效应,这不是一个简单的图像缩放,它不影响其它元素的布局
之前在网上看到这样的效果,但我没有收藏夹网址,后来被我不知道如何来实现这种效果. 如今,互联网已收集有关专门.真是功夫不负有心人,被我发现. 我也努力过自己尝试着写: 但仅仅是单纯的图片放大.并且还影 ...
- jQuery UI -- Repeater & 手风琴(Accordion)效果
jQuery UI -- Repeater & 手风琴(Accordion)效果 很简单的范例,完全不用写程序 直接套用就能做! 但是,基础不稳的人,连「复制贴上」直接套用, 对您而言,都困难 ...
- jQuery实际案例③——手风琴的效果
如图,用最简单的方式实现手风琴的效果,核心,就是通过改变自身即鼠标移上去的那张图的width,与其他的width就可,但是需要用animate,先改变自己的width,再改变其他的.
- bootstrap-简洁实用的jQuery手风琴插件
前端 <html lang="zh"> <head> <meta charset="UTF-8"> <meta htt ...
- jQuery手风琴广告展示插件
效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...
- jQuery手风琴菜单!!!!
jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...
- jQuery手风琴制作
jQuery手风琴制作 说起手风琴,想必大家应该都知道吧,简单的来说就是可以来回收缩的这么一个东西,接下来,我就给大家演示一下用jQuery制作一个手风琴菜单! 写jQuery前,我们需要引用一个jQ ...
- jQuery手风琴的制作!!
jQuery手风琴的制作 首先我们先来做一个简单的jQuery的效果图 效果图 如下: css代码 如下: <style type="text/css" media=&quo ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
随机推荐
- 远程登录oracle 12.2数据库报错ORA-28040解决办法
今天新安装的oracle 12.2.0.1数据库,通过本地sqlplus远程登录12c数据库报错ora-28040,如下: ORA-28040: No matching authentication ...
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle
安装 webpack-node-externals yarn add -D webpack-node-externals
- hyperledge vagrant docker development environment
https://blog.csdn.net/zgljl2012/article/details/52896372
- 制作STM32开发板要买的电子元器件
1.STM32F103VET6芯片 2.电阻(10K.1.5K.1K.510R.47R.27R.0R) 3.电容(104.4.7uf.1uf.22uf.10pf.) 4.二极管(普通二极管D1206. ...
- 预备作业3:Linux安装及命令入门
linux系统的安装 1.虚拟机: 首先是VirtualBox5.2.7的安装,这个按照老师给的基于VirtualBox安装Ubuntu图文教程一步步来很快就能安好,也没有遇到无法选择64-bit的问 ...
- linux之用户和用户组
什么用户组? 具有某种共同特征的用户集合起来.用户组(Group)配置文件主要有 /etc/group和/etc/gshadow,其中/etc/gshadow是/etc/group的加密信息文件. 注 ...
- 【python基础】os.path模块常用方法详解
os.path模块 主要用于文件的属性获取,在编程中经常用到,以下是该模块的几种常用方法. 更多的方法可以去查看官方文档:http://docs.python.org/library/os.path. ...
- 递归、嵌套for循环、map集合方式实现树形结构菜单列表查询
有时候, 我们需要用到菜单列表,但是怎么样去实现一个菜单列表的编写呢,这是一重要的问题. 比如我们需要编写一个树形结构的菜单,那么我们可以使用JQuery的zTree插件:http://www.tre ...
- Python3学习之路~5.4 os模块
用于提供系统级别的操作 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shel ...
- 【LNMP】提示Nginx PHP “No input file specified”错误的解决办法
原理: 任何对.php文件的请求,都简单地交给php-cgi去处理,但没有验证该php文件是否存在. PHP文件不存在,没办法返回普通的404错误,它返回 一个404,并带上一句”No input f ...