jquery .animate() height to auto

Question

나는 jquery를 처음 사용했다. div를 특정 높이로 움직여야 만한다. 그리고 다음 번 클릭 할 때 높이 auto에 애니메이션을 적용해야한다. 나는 px에서 높이를 제공 할 때만 움직일 수있다. 여기 내 코드는 .. any1은 페이지 부하에서 div의 높이를 찾는 방법을 제안 할 수있다. 내가 사업부는 .. height144px을 붕괴 할 경우 조건 및 전 사업부의 모든 요소를 ​​표시하는 그것의 전체 높이 스트레칭 할 다른 조건에서

$("#photobutton").click(function(){ 
          var $text = $("#photobutton").text(); 

         if($text == "hide photos") 
         { 
          $("#photocontainer").animate({height: '144px'}, 1000); 
          $("#photobutton").text("more photos"); 
         } 
         else if($text == "more photos") 
         { 
          $("#photocontainer").animate({height: '100%'}, 1000); 

          $("#photobutton").text("hide photos"); 
         } 

         }); 

..

Answer 1

는 사용

$("#photocontainer").animate({height: $("#photocontainer").parent().height()+'px'}, 1000); 

편집 높이 애니메이션의

1. 예 부모의 높이를 채우기 위해 : http://jsfiddle.net/techfoobar/HXjfe/

2. 창의 높이를 채우는 높이의 애니메이션 예제 팔 : http://jsfiddle.net/techfoobar/C37rs/1/

편집 # 2

자동 높이 애니메이션 : http://jsfiddle.net/techfoobar/psexn/3/

jQuery의 애니메이션 기능은 그 자체로 자동 높이로 애니메이션되지 않습니다. 실제로 애니메이션 이전에는 결정할 수없는 높이로 애니메이션되지 않습니다.

하지만 그렇게 할 수 있습니다. 그러나 오히려 추한 해킹이 필요합니다. 해킹은 div를 숨기고, 높이를 자동으로 설정하고, 높이를 기록하고, 높이와 가시성을 되돌리기위한 것입니다. 목표 높이를 얻은 다음 애니메이션을 적용합니다.

Answer 2

당신은거야 백분율이 아닌 픽셀로 작업하고 싶습니다.

$(window).height(); // returns height of browser viewport 
$(document).height(); // returns height of HTML document 

해당 항목을 찾은 다음 .height();을 사용하십시오. 당신이 부모의 높이를 채우기 위해 div에 원하는 가정 번째 animate() 전화에서

Answer 3

Jquery의 animate 방법은 픽셀뿐만 아니라 백분율로도 잘 작동합니다. http://jsfiddle.net/KH8Gf/11/

이 문제가 제대로 사업부 photocontainer의 부모를 정의하지 않은 것으로 믿고 날 리드 :

다음은 예입니다. 높이를 백분율로 표시하면 부모의 x %를 의미합니다. 부모가 정의되어 있지 않으면 백분율로 작동하지 않습니다.

가능한 경우 HTML 마크 업과 CSS를 게시하십시오.

UPDATE

당신이 photocontainer의 exapndsion 애니메이션있어, 당신은 그것을 확장해야할지 높이를 지정해야합니다. 이렇게하려면 원하는 높이를 백분율 또는 픽셀로 알고 있어야합니다.

photocontainer에 다양한 양의 데이터를 저장할 수있게하려면 전략을 변경해야합니다. photocontainer의 높이를 auto으로 정의한 다음 확장을 클릭하면 photocontainer 안에 새 요소를 추가하십시오. Photocontainer은 자동으로 적절한 크기로 확장됩니다.

예 : http://jsfiddle.net/KH8Gf/21/