为什么我的jQuery .mouseleave动画不起作用？

Question

所以，我相当新的jQuery ..我正在一个网站上工作，与Twitter Bootstrap。现在我想让我的菜单按钮在你弹出时弹出。 mouseenter。这工作。不过，我想在什么时候回到原来的状态。 mouseleave。谁能帮忙？

$('.nav-pills li a').not('.nav-pills .active a').mouseenter(function(){ 
    console.log('enter'); 
    $(this).animate({ 
     height: '+=5px', 
     opacity: '1' 
    }, 300); 
}); 
$('.nav-pills li a').not('.nav-pills .active a').mouseleave(function(){ 
    console.log('leave'); 
    $(this).animate({ 
     height: '-=5px', 
     opacity: '0.5' 
    }, 300); 
}); 

编辑：对不起“回合的.. HTML到这里：

<div class="container" id="menu"> 
    <div class="tabbable fixed-top"> 
      <ul class="nav nav-pills"> 
       <li class="active"><a href="#">Home</a></li> 
       <li><a href="#">Restaurant</a></li> 
       <li><a href="#">Hotel</a></li> 
       <li><a href="#">Feesten & vergaderen</a></li> 
       <li><a href="#">Nieuwsbrief & activiteiten</a></li> 
       <li><a href="#">Omgeving & links</a></li> 
       <li><a href="#">Revieuws/Gastenboek</a></li> 
      </ul> 
    </div> 
</div> 

Answer 1

- 你的代码做工精细

- 只是改变不透明度： '1' 鼠标离开事件

- 试试这个吧

$('.nav-pills li a').not('.nav-pills .active a').hover(function() { 
    $(this).animate({ 
     height: '+=5px', 
     opacity: '0.5' 
    }, 300); 
}, function() { 
    $(this).animate({ 
     height: '-=5px', 
     opacity: '1' 
    }, 300); 
});