jQuery导航菜单上下翻动效果

HTML

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

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

引入菜单样式和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
    });
});