文本懸停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/