Почему моя анимация 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); 
}); 

EDIT: К сожалению насчет этого .. 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' в MouseLeave случае

- Попробуйте это

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