2

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");
        });

     });
Ivan Novak
  • 666
  • 3
  • 10
  • 25
  • possible duplicate of [jQuery: How can I animate to a taller height with the height being added to the top of the element?](http://stackoverflow.com/questions/2460039/jquery-how-can-i-animate-to-a-taller-height-with-the-height-being-added-to-the) – John Koerner Feb 07 '13 at 15:53

1 Answers1

0

To animate from bottom to top, this is quite easy. Try putting the div[button] in to another div[a parent div] All you have to do is set the parent container to position: relative and the animated container to position: absolute with BOTTOM: 0. It'll stay at the bottom of the parent DIV.

Janak
  • 4,986
  • 4
  • 27
  • 45