CODEWITHSUNDEEP
jqueryhtmlcss
user3136506
user3136506

Reputation: 5

jQuery: Expanding div height

I have 5 buttons that I would like to animate when I hover over them. What I want is to make buttons expand up not down. Here are the codes: http://jsbin.com/qaqoxipo/1/edit?html,css,js,output

It may look like they are expanding up, but in reality one button is pushing other buttons down. Any ideas?

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',
                });
            });
        });

Upvotes: 0

Views: 95

Answers (2)

Benjamin
Benjamin

Reputation: 2670

You can also try hover function 

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

Check the link for more reference DEMO

Upvotes: 0

nanobar
nanobar

Reputation: 66355

You almost had it.

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

PS on Chrome at least, during the animation the bottom of the shape shakes a little - add vertical-align: bottom to .big-button to fix that.

Upvotes: 1

Related Questions