jQuery和CSS3制作的艺术优雅的手风琴式滑动导航特效

jQuery和CSS3制作的艺术优雅的手风琴式滑动导航特效

使用jQuery和CSS3制作的滑动导航菜单代码，画面滑动非常流畅和优雅，值得推荐的一款广告特效代码！

<div id="content">
            <a class="back" href="http://tympanus.net/codrops/2010/04/26/elegant-accordion-with-jquery-and-css3/"></a>
            <div class="title"></div>
            <div class="reference">
                <p><a href="http://www.codesocang.com">更多特效&gt;&gt;</a></p>
                <p><a href="http://www.codesocang.com/texiao/index.html">广告代码&gt;&gt;</a></p>
                <p><a href="http://www.codesocang.com/muban/index.html">网页模板&gt;&gt;</a></p>
                <p><a href="http://www.codesocang.com/jiaocheng/index.html">网页制作教程&gt;&gt;</a></p>
            </div>




            <ul class="accordion" id="accordion">
                <li class="bg1">
                    <div class="heading">Guler</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>Guler</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                            ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                            reprehenderit in voluptate velit esse cillum dolore eu fugiat
                            nulla pariatur.</p>
                        <a href="#">more &rarr;</a>
                    </div>
                </li>
                <li class="bg2">
                    <div class="heading">Phillips</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>Phillips</h2>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                            quae ab illo inventore veritatis et quasi architecto beatae vitae
                            dicta sunt explicabo. </p>
                        <a href="#">more &rarr;</a>
                    </div>


                </li>
                <li class="bg3">
                    <div class="heading">Diamanti</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>Diamanti</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
                            ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                            reprehenderit in voluptate velit esse cillum dolore eu fugiat
                            nulla pariatur.</p>
                        <a href="#">more &rarr;</a>
                    </div>


                </li>
                <li class="bg4 bleft">
                    <div class="heading">Meiklejohn</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <h2>Meiklejohn</h2>
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
                            quae ab illo inventore veritatis et quasi architecto beatae vitae
                            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
                            sit aspernatur aut odit aut fugit, sed quia consequuntur magni
                            dolores eos qui ratione voluptatem sequi nesciunt.</p>
                        <a href="#">more &rarr;</a>
                    </div>


                </li>
            </ul>
        </div>


        <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/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);
                    }
                );
            });
        </script>