[jQuery]animated-hover

 

 

 

jQuery:

$(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");
    });


});

 

 

Html:

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

 

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/button.gif) no-repeat center center;
}
.menu li em {}{
    background: url(images/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;
}

 

参考网页：http://www.bbon.cn/wp-content/uploads/demo/jquery/animated-hover1.html

附件：http://www.box.net/shared/3hdj5ggkck