使用 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);
        }
    );
});

　　

您可能感兴趣的相关文章


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