基于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