使用 jQuery & CSS3 实现优雅的手风琴效果
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果。今天,我们将创造一个优雅的手风琴内容效果。这个想法是有悬停时滑出一些垂直手风琴标签。我们将添加一些 CSS3 属性来提升外观。
效果演示 插件下载
HTML示例代码:
- <ul class="accordion" id="accordion">
- <li class="bg1">
- <div class="heading">Heading</div>
- <div class="bgDescription"></div>
- <div class="description">
- <h2>Heading</h2>
- <p>Some descriptive text</p>
- <a href="#">more ?</a>
- </div>
- </li>
- </ul>
CSS示例代码:
- ul.accordion li .description h2{
- text-transform:uppercase;
- font-style:normal;
- font-weight:bold;
- letter-spacing:1px;
- font-size:45px;
- color:#444;
- text-align:left;
- margin:0px 0px 15px 20px;
- text-shadow:-1px -1px 1px #ccc;
- }
- ul.accordion li .description p{
- line-height:14px;
- margin:10px 22px;
- font-family: "Trebuchet MS", sans-serif;
- font-size: 12px;
- font-style: italic;
- font-weight: normal;
- text-transform: none;
- letter-spacing: normal;
- line-height: 1.6em;
- }
- ul.accordion li .description a{
- position:absolute;
- bottom:5px;
- left:20px;
- text-transform:uppercase;
- font-style:normal;
- font-size:11px;
- text-decoration:none;
- color:#888;
- }
- ul.accordion li .description a:hover{
- color:#333;
- text-decoration:underline;
- }
JavaScript代码:
- $(function() {
- $('#accordion > li').hover(
- function () {
- var $this = $(this);
- $this.stop().animate({'width':'480px'},500);
- $('.heading',$this).stop(true,true).fadeOut();
- $('.bgDescription',$this).stop(true,true).slideDown(500);
- $('.description',$this).stop(true,true).fadeIn();
- },
- function () {
- var $this = $(this);
- $this.stop().animate({'width':'115px'},1000);
- $('.heading',$this).stop(true,true).fadeIn();
- $('.description',$this).stop(true,true).fadeOut(500);
- $('.bgDescription',$this).stop(true,true).slideUp(700);
- }
- );
- });
via:http://www.cnblogs.com/lhb25/p/e ... query-and-css3.html
【使用 jQuery & CSS3 实现优雅的手风琴效果】相关文章
1. 使用 jQuery & CSS3 实现优雅的手风琴效果
2. 使用 jQuery & CSS3 实现优雅的手风琴效果
9. 如何设计优雅的移动游戏?
10. jQuery横向图片手风琴插件
本文来源:https://www.51html5.com/a1051.html
﹝使用 jQuery & CSS3 实现优雅的手风琴效果﹞相关内容
- 使用 jQuery & CSS3 实现 3D 图片滑块效果
- 使用 jQuery & CSS3 实现 3D 图片滑块效果
- 学习使用 jQuery & CSS3 制作照片堆栈效果
- jQuery弹出层对话框 外观优雅带遮罩
- 使用 jQuery & CSS3 制作美丽的照片画廊
- Arctext.js - 基于 CSS3 & jQuery 的文本弯曲效果
- Image Wall - jQuery & CSS3 图片墙效果
- 使用 jQuery & Canvas 制作相机快门效果
- 推荐20款基于 jQuery & CSS 的文本效果插件 (上)
- 推荐20款基于 jQuery & CSS 的文本效果插件 (下)