jquery - 为什么我的 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

-- 你的代码工作正常

-- 只需在 mouseleave 事件中更改 opacity: '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);
});