文字悬停jquery动画

Question

我正在尝试为导航链接实现文本悬停效果，在 mouseenter 上，链接中的文本快速向上滑动（短暂消失），文本更改，然后向下滑动。在 mouseleave 时，原始文本会返回。

类似于以下网站导航链接：

http://wrapbootstrap.com/preview/WB08808B5

这是我尝试过的，似乎在 mouseenter 上触发了不止一次，并且动画从未像上面描述的那样执行：

<div class="navbar-right" >
    <ul class="nav navbar-nav" >
        <li><a href="#" class="link">Cars</a><span class="nav_anim">to drive</span></li>
        <li><a href="#" class="link">Wood</a><span class="nav_anim">to chop</span></li>
        <li><a href="#" class="link">steak</a><span class="nav_anim">to eat</span></li>
    </ul>
</div>

jQuery

var orig, anim;
$('.link').mouseenter(function () {
    orig = $(this).text();
    anim = $(this).parent().children('.nav_anim').text();
    $(this).stop(true,false).slideUp(300).text(anim).slideDown(300);
}).mouseleave(function(){
    $(this).stop(true,false).slideUp(300).text(orig).slideDown(300);
});

JSFiddle：http://jsfiddle.net/f0raekme/1/

Answer 1

$("ul li").hover(
    function() {

        first = $(this).children('a.link');


        $(first).animate({
            marginTop: "-20px",
            opacity: '0'

        }, 300);

    },



    function() {

        $(first).animate({
            marginTop: "0px",
            opacity: '1'
        }, 300);

    }



);

而且，稍微改变了css：（固定高度）...

li {
    display:block-inline;
    float:left;
    border:1px solid grey;
    width:100px;
    height:20px;
    overflow:hidden;
    list-style-type:none;
    text-align:center;
}

演示：http://jsfiddle.net/f0raekme/3/