如何讓jQuery動畫向上

我有一些jquery運行得相當好，但是當我將鼠標懸停在所討論的元素上時，底部向下展開，這並不意外，但不是所期望的效果。我希望元素的底部保持靜止，元素的頂部向上擴展。如何讓jQuery動畫向上

如果你想看看我現在有，你可以瀏覽到http://demo.ivannovak.com/mobia/

任何幫助將不勝感激。

這裏是我的代碼：

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

    });

來源

2010-03-18 Ivan Novak

可能的[jQuery的重複：如何將高度添加到元素的頂部？]（http://stackoverflow.com/questions/2460039/jquery-how-can-i -animate到一個-更高-高度與最高度感添加到所述） – 2013-02-07 15:53:26

要阿尼馬特e從下到上，這很容易。嘗試將div [按鈕]放入另一個div [父div] 您只需將父容器設置爲position：relative並將動畫容器的位置設置爲absolute：BOTTOM：0即可。 It'll stay在父DIV的底部。

來源

2013-05-09 06:07:13 Janak

如何讓jQuery動畫向上

回答

相關問題