使用 jQuery & CSS3 实现优雅的手风琴效果


手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果。今天,我们将创造一个优雅的手风琴内容效果。这个想法是有悬停时滑出一些垂直手风琴标签。我...
手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果。今天,我们将创造一个优雅的手风琴内容效果。这个想法是有悬停时滑出一些垂直手风琴标签。我们将添加一些 CSS3 属性来提升外观。

效果演示     插件下载

HTML示例代码:


  1. <ul class="accordion" id="accordion">

  2.     <li class="bg1">

  3.         <div class="heading">Heading</div>

  4.         <div class="bgDescription"></div>

  5.         <div class="description">

  6.             <h2>Heading</h2>

  7.             <p>Some descriptive text</p>

  8.             <a href="#">more ?</a>

  9.         </div>

  10.     </li>

  11. </ul>
复制代码


CSS示例代码:


  1. ul.accordion li .description h2{

  2.     text-transform:uppercase;

  3.     font-style:normal;

  4.     font-weight:bold;

  5.     letter-spacing:1px;

  6.     font-size:45px;

  7.     color:#444;

  8.     text-align:left;

  9.     margin:0px 0px 15px 20px;

  10.     text-shadow:-1px -1px 1px #ccc;

  11. }

  12. ul.accordion li .description p{

  13.     line-height:14px;

  14.     margin:10px 22px;

  15.     font-family: "Trebuchet MS", sans-serif;

  16.     font-size: 12px;

  17.     font-style: italic;

  18.     font-weight: normal;

  19.     text-transform: none;

  20.     letter-spacing: normal;

  21.     line-height: 1.6em;

  22. }

  23. ul.accordion li .description a{

  24.     position:absolute;

  25.     bottom:5px;

  26.     left:20px;

  27.     text-transform:uppercase;

  28.     font-style:normal;

  29.     font-size:11px;

  30.     text-decoration:none;

  31.     color:#888;

  32. }

  33. ul.accordion li .description a:hover{

  34.     color:#333;

  35.     text-decoration:underline;

  36. }
复制代码


JavaScript代码:


  1. $(function() {

  2.     $('#accordion > li').hover(

  3.         function () {

  4.             var $this = $(this);

  5.             $this.stop().animate({'width':'480px'},500);

  6.             $('.heading',$this).stop(true,true).fadeOut();

  7.             $('.bgDescription',$this).stop(true,true).slideDown(500);

  8.             $('.description',$this).stop(true,true).fadeIn();

  9.         },

  10.         function () {

  11.             var $this = $(this);

  12.             $this.stop().animate({'width':'115px'},1000);
标签: jquerycss手风琴

更多 jquery 相关资讯

打造简易可扩展的jQuery/CSS3 Tab菜单

打造简易可扩展的jQuery/CSS3 Tab菜单

今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜单比较假单,你也可以用CSS代码定制你自己

7款非常实用的jQuery/CSS3插件演示和源码

7款非常实用的jQuery/CSS3插件演示和源码

上次我们分享了15款效果很酷的最新jQuery/CSS3特效,非常不错,今天要分享7个非常实用的jQuery/CSS3插件演示和源码,一起来看看。 1、jQuery ajax点击地图显示商家网点分

使用jQuery和CSS3创建Android导航

使用jQuery和CSS3创建Android导航

当玩Galaxy Tab的花哨Android的导航。点击箭头形象应用程序图标会弹出,这不仅仅是精美的动画图标也垂直旋转的3D风格。今天教程教大家如何使用jQuery和CSS3创建Andr

使用jQuery和CSS3实现一个数字时钟

使用jQuery和CSS3实现一个数字时钟

点击进入更详细教程及源码下载 在线演示 我们经常会在网站中看见一个时钟的效果。今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程。 代码: <div id="c

使用jQuery和CSS3弹出图像滑块

使用jQuery和CSS3弹出图像滑块

源码下载 在线演示 在这篇文章中,我们将分享有关如何创建一个弹出图像滑块。我们进行click事件时使用CSS3过渡来变换动画。此图片滑块不会做幻灯片上显示

CSS3+jQuery的图像画廊Photobox

CSS3+jQuery的图像画廊Photobox

    源码下载 在线演示 CSS3+jQuery的图像画廊Photobox ,一个轻量级的图像画廊模态窗口脚本,它使用CSS3光滑的动画和过渡效果,采用GPU渲染,可以完全控制,可定制CSS

Prompt轻量级提示框弹出层Jquery插件

Prompt轻量级提示框弹出层Jquery插件

     此Jquery插件是一个轻量级消息提示框插件,该插件使用jQuery和纯CSS构建,代码不多,但功能实用,界面简洁美观,使用简单。具有自动关闭功能,时间可控制,也可用代码强制关闭,具

基于Edge Animate可视化工具开发CSS3动画

基于Edge Animate可视化工具开发CSS3动画

今天这篇文章主要介绍透过Adobe Edge Animate这款可视化工具操作CSS3的动画,与前一篇文章的根本区别就是Edge Animation制作动画是可视化的,操作CSS3动画的方式是和Jav

使用jQuery和CSS3创建一个全屏幕幻灯效果

使用jQuery和CSS3创建一个全屏幕幻灯效果

介绍来自于tympanus的一个全屏幻灯特效教程,在这个教程中将介绍如何使用jQuery和CSS3来实现一个全屏的幻灯特效,你将看到每一个幻灯都从水平或者垂直中间断开然后消失,使用不

Cufon, jQuery和CSS3实现的超强飞出菜单

这里教程通过使用cufon类库实现比较酷的的字体,如果你不知道什么是cufon请参考其它文章。Cufon现在的使用可能不如以前了,更好的选择是使用Google font,但是很可惜,中文

更多 css 相关资讯

一个轻量级CSS3动画库:JX.Animate

一个轻量级CSS3动画库:JX.Animate

JX.Animate 是由腾讯前端团队 AlloyTeam 推出的一个 CSS3 动画库,通过 JX(腾讯的前端框架)插件的形式提供。 Why CSS3 众所周知在支持HTML5的浏览器中,使

css3简单几步画一个乾坤图

效果如上,鼠标移上去会有动画。 代码如下非常简单: <html> <head> <style> .outer{height:100px;width:200px;border-radius:100px 100px 0px 0px;border:s

经验分享:使用 Restyle.js 简化 CSS 预处理

Andrea Giammarchi的restyle.js是一个新的,基于JavaScript的CSS预处理器,能够运行在服务端(通过Node.js)或者浏览器中。它宣称自己是“一种简化的CSS方法”,能够生成CSS规

一款非常棒的纯CSS3 3D菜单演示及制作教程

一款非常棒的纯CSS3 3D菜单演示及制作教程

这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大家,顺便来分析一下实现的源码。下面

用CSS美化半个字符巧妙方法

用CSS美化半个字符巧妙方法

CSS不仅是一种技术,也是一种艺术,如果你运用的好,可以用它创造出各种神奇的效果,随着现代浏览器技术的进步,CSS3的革新,也给了程序员更大的空间和可能性来发挥自己的奇思妙

CSS3图片倒影技术

目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览

CSS渐变色效果的实现方法与效果演示

通过CSS border-radius,我向大家展示了如何实现方形元素的圆角效果,这解决了以前美工画出这种效果而开发人员无法实现的问题。CSS渐变色(Gradients)也是一个类似的技术

纯CSS3实现的顶部社会化分享按钮

纯CSS3实现的顶部社会化分享按钮

今天要分享一款纯CSS3实现的社会化分享按钮,它放置在网页的顶部,你可以选择将它固定在网页顶部,这样对用户分享内容就十分方便。这些社会化分享按钮的图标文件来自goog

CSS3圆角的制作

CSS3圆角技术能非常好的美化你的页面效果,而且避免了使用图片辅助,一则省去了制作图片的时间,二则省去了浏览器加载图片造成的延迟和带宽。如今,这种利用CSS制作圆角的

你可能不知道的5种 CSS 和 JS 的交互方式

你可能不知道的5种 CSS 和 JS 的交互方式

  CSS和JavaScript: 在各个浏览器版本中的分界线似乎变得越来越模糊,两者所完成的功能差异非常明显,但说到底他们都是前端技术,所以确实需要紧密地配合。虽然我们将代码拆

更多 手风琴 相关资讯