Comment faire jQuery animer vers le haut

Question

J'ai quelques jquery fonctionnant assez bien, mais quand je survole l'élément en question, le fond se dilate vers le bas ce qui n'est pas inattendu mais n'est pas l'effet désiré. Je voudrais que le bas de l'élément reste stationnaire avec le haut de l'élément se dilatant vers le haut.

Si vous souhaitez voir ce que j'ai actuellement, vous pouvez accéder à http://demo.ivannovak.com/mobia/

Toute aide serait grandement appréciée.

Voici mon 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

Pour animat De bas en haut, c'est très facile. Essayez de placer le div [bouton] dans un autre div [un div parent] Tout ce que vous avez à faire est de définir le conteneur parent à la position: relative et le conteneur animé à la position: absolue avec BOTTOM: 0. au bas de la DIV parent.