jQuery:扩展div高度

Question

我有 5 个按钮，当我将鼠标悬停在它们上面时，我想为它们设置动画。我想要的是让按钮向上展开而不是向下展开。以下是代码: http://jsbin.com/qaqoxipo/1/edit?html,css,js,output

它们看起来像是在向上扩展，但实际上一个按钮正在向下插入其他按钮。有什么想法吗？

HTML:

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script><div id="big-buttons-container">
        <div class="big-button"></div><!--
        --><div class="big-button" style="background-color: #bb0b39"></div><!--
        --><div class="big-button"></div><!--
        --><div class="big-button" style="background-color: #bb0b39"></div><!--
        --><div class="big-button"></div>
</div>

CSS:

#big-buttons-container
{
    width: 1000px;
    height: 180px;
    margin: 0 auto;
}

.big-button
{
    width: 200px;
    height: 180px;
    background-color: #D31145;
    display: inline-block;
    margin-top: 25px;
}

JS:

$(document).ready(function() {
            $('.big-button').mouseenter(function() {
                $(this).animate({
                    height: '+=25px',
                });
            });
            $('.big-button').mouseleave(function() {
                $(this).animate({
                    height: '-=25px',
                });
            });
        });

Answer 1

你几乎成功了。

$(document).ready(function() {
    $('.big-button').on({
        mouseenter: function() {
            $(this).animate({
                height: '+=25px',
                marginTop: '-=25'
            });
        },
        mouseleave: function() {
            $(this).animate({
                height: '-=25px',
                marginTop: '+=25'
            });
        }
    });
});

至少在 Chrome 上的 PS，在动画期间形状的底部有点晃动 - 添加 vertical-align: bottom 到 .big-button 来解决这个问题。