위로 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) - 높이 - 높이 - 추가 - 높이 - 높이 -되고 - 더 - 높이) –

animat 사람 : 여기

내 코드입니다 하단에서 상단으로 전자, 이것은 매우 쉽습니다. div [button]을 다른 div [퍼팅 div]에 넣으십시오. 부모 컨테이너를 position : relative로 설정하고 애니메이션 컨테이너를 position : absolute로 설정하면됩니다. BOTTOM : 0 계속됩니다. 부모 DIV의 맨 아래에.

출처

2013-05-09 06:07:13 Janak

위로 jQuery 애니메이션을 만드는 방법

답변

관련 문제