基于jQuery鼠标悬停上下滑动导航条

基于jQuery鼠标悬停上下滑动导航条。这是一款蓝色好看的鼠标响应式网站导航菜单特效。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

  <div id="menu2" class="menu">

        <ul>

            <li><a href="#">首 页</a></li>

            <li><a href="#">预报预警</a></li>

            <li><a href="#">气象新闻</a></li>

            <li><a href="#">气象服务</a></li>

            <li><a href="#">行政审批</a></li>

            <li><a href="#">信息公开</a></li>

            <li><a href="#">气象科普</a></li>

            <li><a href="#">党风廉政</a></li>

            <li><a href="#">气象科普</a></li>

        </ul>

        <div class="cls">

        </div>

    </div>

Javasctipt代码：

  $(document).ready(function () {



            $("#menu2 li a").wrapInner('<span class="out"></span>');



            $("#menu2 li a").each(function () {

                $('<span class="over">' + $(this).text() + '</span>').appendTo(this);

            });



            $("#menu2 li a").hover(function () {

                $(".out", this).stop().animate({ 'top': '48px' }, 300); // move down - hide

                $(".over", this).stop().animate({ 'top': '0px' }, 300); // move down - show



            }, function () {

                $(".out", this).stop().animate({ 'top': '0px' }, 300); // move up - show

                $(".over", this).stop().animate({ 'top': '-48px' }, 300); // move up - hide

            });



        });

via：http://www.w2bc.com/Article/42960