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以修复此问题。

Answer 2

您也可以尝试悬停功能

    $('.big-button').hover(function() {
            $(this).stop(true, false).animate({
                height: '+=25px',
                marginTop: '-=25'
            });
        },
        function() {
            $(this).stop(true, false).animate({
                height: '-=25px',
                marginTop: '+=25'
            });
    });

检查链接以获取更多参考DEMO

jQuery：扩展div高度

2 个答案: