How to make jQuery animate upwards

Question

Hey there,

I've got some jquery running fairly well, howeever when I hover over the element in question, the bottom expands downward which is not unexpected but is not the desired effect. I'd like the bottom of the element to remain stationary with the top of the element expanding upwards.

If you'd like to see what I currently have, you may navigate to http://demo.ivannovak.com/mobia/

Any help would be greatly appreciated.

Here is my code:

HTML

    <div class="button">
        <h3>Product Quality</h3>
        <div>Duis tristique ultricies velit sit amet adipiscing.</div>
        <img src="<?php bloginfo('template_url'); ?>/assets/img/INgravatar_subernova.png" alt="placeholderImage" height="70" />
        <p><a href="#">Learn More &gt;</a></p>
        <div class="bottom"></div>
    </div>

CSS

        div#buttons {}
            div#buttons .button {
                background: url(assets/img/bg_blue_top.jpg) #206094 no-repeat top left;
                padding: 5px 10px 0;
                width: 209px;
                float: left;
                margin-right: 5px;
                position: relative;
                height: 50px;
            }
                div#buttons .button h3 {
                    font-weight: normal;
                    color: #fff;
                    text-transform: uppercase;
                }
                div#buttons .button:hover div,
                div#buttons .button:hover img {
                    /* display: block; */
                }
                div#buttons .button div {
                    width: 120px;
                    padding-right: 20px;
                    float: left;
                    color: #bbb;
                    display: none;
                }
                div#buttons .button img {
                    float: right;
                    display: none;
                }
                div#buttons .button p {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    z-index: 9;
                    font-weight: bold;
                    text-transform: uppercase;
                }
                    div#buttons .button p a {
                        color: #7bc143;
                        text-decoration: none;
                    }
                        div#buttons .button p a:hover {
                            text-decoration: underline;
                        }
                div#buttons .button .bottom {
                    background: url(assets/img/bg_blue_bottom.jpg) no-repeat bottom left;
                    height:26px;
                    position: absolute;
                    display: block;
                    width: 229px;
                    right: 0px;
                    padding:0;
                    bottom: 0;
                }

jQuery

     $(document).ready(function() {
        $('.button').mouseenter(function() {
            $(this).closest('div').animate({
                height: "150px",
            }, 400, "swing");
        });
        $('.button').mouseleave(function() {
            $(this).closest('div').animate({
                height: "50px",
            }, 400, "swing");
        });

     });

Answer 1

Here is the solution: http://stackoverflow.com/questions/1647462/jqueryanimate-conundrum

I answered this yesterday @ http://stackoverflow.com/questions/2460039/jquery-how-can-i-animate-to-a-taller-height-with-the-height-being-added-to-the-t/2460096#2460096