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

        }

    );

});

您可能感兴趣的相关文章

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

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