jQuery导航菜单上下翻动效果

一款非常好看的悬浮菜单效果，js代码很少。

淘建站为您提供更多_导航菜单_滑动导航_动画_悬浮，在此特别感谢您对我们的支持与厚爱！

HTML

首先我们在#menu2放置一个菜单列表

• 首 页
• 预报预警
• 气象新闻
• 气象服务
• 行政审批
• 信息公开
• 气象科普
• 党风廉政
• 气象科普

引入菜单样式和jQuery库

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>

jQuery

$(function() {
    $("#menu2 li a").wrapInner('<span class="out"></span>'); //所有a标签子级都加上span.out
    $("#menu2 li a").each(function() { //所有a标签都加上.over，并附带a标签的文字
        $('<span class="over">' + $(this).text() + '</span>').appendTo(this);
    });

    $("#menu2 li a").hover(function() { //当悬浮a标签时
        $(".out", this).stop().animate({
            'top': '48px'
        },
        300); // move down - hide
        $(".over", this).stop().animate({
            'top': '0px'
        },
        300); // move down - show
    },
    function() { //当离开a标签时
        $(".out", this).stop().animate({
            'top': '0px'
        },
        300); // move up - show
        $(".over", this).stop().animate({
            'top': '-48px'
        },
        300); // move up - hide
    });
});