jQuery-鼠标经过激活效果

<script type="text/javascript" language="javascript">
        $(document).ready(function () {

            $(".menu a").hover(function () {
                $(this).next("em").animate({ opacity: "show", top: "-75" }, "slow");
            }, function () {
                $(this).next("em").animate({ opacity: "hide", top: "-85" }, "fast");
            });


        });
    </script>

 <ul class="menu">
        <li><a href="#">Web Designer Wall</a> <em>A wall of design
            ideas, web trends, and tutorials</em> </li>
        <li><a href="#">Best Web Gallery</a> <em>Featuring the best
            CSS and Flash web sites</em> </li>
        <li><a href="#">N.Design Studio</a> <em>Blog and design
            portfolio of WDW designer, Nick La</em> </li>
    </ul>

<style type="text/css">
        body
        {
            margin: 10px auto;
            width: 570px;
            font: 75%/120% Arial, Helvetica, sans-serif;
        }
        .menu
        {
            margin: 100px 0 0;
            padding: 0;
            list-style: none;
        }
        .menu li
        {
            padding: 0;
            margin: 0 2px;
            float: left;
            position: relative;
            text-align: center;
        }
        .menu a
        {
            padding: 14px 10px;
            display: block;
            color: #000000;
            width: 144px;
            text-decoration: none;
            font-weight: bold;
            background: url(images/animated-hover/button.gif) no-repeat center center;
        }
        .menu li em
        {
            background: url(images/animated-hover/hover.png) no-repeat;
            width: 180px;
            height: 45px;
            position: absolute;
            top: -85px;
            left: -15px;
            text-align: center;
            padding: 20px 12px 10px;
            font-style: normal;
            z-index: 2;
            display: none;
        }
    </style>