首页 > 代码库 > 使用 jQuery & CSS3 实现优雅的手风琴效果

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

2024-07-31 15:02:55   220人阅读

　　手风琴效果常用于切换显示一组内容，这种方式既可以节省网页空间又可以有动画效果。今天，我们将创造一个优雅的手风琴内容效果。这个想法是有悬停时滑出一些垂直手风琴标签。我们将添加一些 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="http://www.mamicode.com/#">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);        }    );});

　　

您可能感兴趣的相关文章
  • Web 开发中很实用的10个效果【源码下载】
  • 精心挑选的优秀jQuery Ajax分页插件和教程
  • 12个让人惊叹的的创意的 404 错误页面设计
  • 让网站动起来！12款优秀的 jQuery 动画插件
  • 十分惊艳的8个 HTML5 & JavaScript 特效

 

本文链接：使用 jQuery 和 CSS3 实现优雅的手风琴效果

编译来源：梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

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


联系
我们