导航特效——文字上下来回滚动

html结构代码如下所示：

<ul id="nav">
      <li><a href="index.html" class="home">HOME</a></li>
      <li><a href="about.html" class="about">ABOUT</a></li>
      <li><a href="photo.html" class="photo">PHOTO</a></li>
      <li><a href="works.html" class="works">WORKS</a></li>
      <li><a href="contact.html" class="contact">CONTACT</a></li>
</ul>

CSS代码如下所示：

#nav {
    font-size: 1.1em;
    height: 38px;
    line-height: 38px;
    padding-top: 10px;
    float: right;
}
#nav li {
    margin: 0;
    padding: 0;
    overflow: hidden;
    float: left;
    height: 40px;
    width: 114px;
    display: block;
    text-align: center;
}
#nav li a, #nav li span {
    float: left;
    text-decoration: none;
    clear: both;
    width: 100%;
    font-family: Arial;
    font-size: 18px;
    color: #c0c0c0;
}
#nav li a{
    color: #90c341;
}

JS代码如下所示：

$("#nav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
    
    $("#nav li").each(function() { //For each list item...
        var linkText = $(this).find("a").html(); //Find the text inside of the a tag
        $(this).find("span").show().html(linkText); //Add the text in the span tag
    }); 
    
    $("#nav li").hover(function() {    //On hover...
        $(this).find("span").stop().animate({ 
            marginTop: "-40" //Find the span tag and move it up 40 pixels
        }, 250);
    } , function() { //On hover out...
        $(this).find("span").stop().animate({
            marginTop: "0" //Move the span back to its original state (0px)
        }, 250);
    });

结果如下图所示：