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事件中的'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);
});

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

1 个答案: