如何让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动画向上

回答

相关问题