문서의 높이에 애니메이션 적용 jQuery

확장 div 안에 html 문서를로드하려고하는데 확장을 애니메이션화하고 싶습니다. 이제는 높이를 설정할 수만 있고 나머지는 보여주는 애니메이션이 생깁니다.문서의 높이에 애니메이션 적용 jQuery

그래서 콘텐츠를로드 한 다음 애니메이션을 적용하고 싶습니다. 기본적으로 300px는 내 HTML 문서의 높이가되어야합니다 (내 포트폴리오의 다른 프로젝트부터 다름).

box_project2 HTML은 별도의 HTML 문서에 있으며 애니메이션 높이를 정의해야합니다.

주요 프로젝트 중 일부를 클릭하여 심각한 문제를 볼 수있는 사이트에 대한 링크. http://richardhedberg.com/portfolionew/index.html#

$('.thumbs2').click(function() { 
    var idStr = ("project/" + $(this).attr('id')); 
    var newHeight = 0; 
    $('#show2').animate({ height: '300px', opacity: 0 }, function() { 
     $('#workp').fadeIn('fast'); 
     $.scrollTo('#gohere', 300); 

     $('#show2').load(idStr, function() { 
      newHeight = $('#box_project2').outerHeight(); 
      $(this).animate({ height: newHeight }, 300, function() { 
       $('#show2').delay(200).animate({ opacity: 1 }, 800); 
       $('#close2').css({ 'display': 'block', 'height': '25px' }); 
      }); 
     }); 
    }); 
}); 




     <div id="close2"> 
     </div> 
     <div id="show2"> 
      <div id="box_project2"> 
      </div> 
     </div> 


.workp { 
background:#fff; 
position:relative; 
z-index:999; 
margin-bottom:30px; 


} 


#close2 { 
position:absolute; 
width:25px; 
height:24px; 
background:url(images/graphics/CloseIcon.png); 
right:0px; 
top:0px; 
z-index: 9999; 
display: none; 
margin-left:-30px; 



} 
#show2 { 
display: block; 
height: 0px; 
opacity: 1; 
margin-left:-30px; 
clear:both; 

} 

#box_project2 { 

background:#fff; 
text-align: left; 
clear:both; 
height:100%; 


}

출처

2011-10-12 Richard Hedberg

을 추가 된 px 장치를 가지고해야하는 나는 완전히 따르지 않는 0입니다하지만 당신은 설정 한 경우 jsfiddle.net의 예제를 통해 문제를 훨씬 잘 표현할 수 있습니다. :) –

http://richardhedberg.com/portfolionew/index.html# 원하는 경우 내 사이트를 살펴볼 수 있습니다. –

그리고 당신의 질문은 무엇인가?

먼저로드 콜백에서로드하고 애니메이션을 실행하고 싶습니까?

그러나 사용자에게 얼마나 많은 데이터가로드되었는지 보여주고 싶다면 먼저 자신 만의 애니메이션 클래스를 작성해야합니다. 그런 다음 모든 프레임에서 데이터를로드하고 콜백에서 다음 프레임으로 이동합니다. 이 경우에는 하나의 아약스 호출에서 흐르는 데이터를 제어 할 수 없으므로 동적으로 URL을 변경해야합니다.

출처

2011-10-12 19:35:16 freakish

사실, 애니메이션은 애니메이션이 끝날 때만 실행됩니다. 'animate()'의 콜백 함수는 내가 틀리지 않으면 애니메이션의 끝에서 실행됩니다. – Dutchie432

물론 가능합니다. 나는 약간 피곤하다. :) 그냥 대답을 편집했습니다. – freakish

미안 꽤 피곤하고 아마도 불분명하다, 내가 원하는 것은 별도의 HTML 파일 (예 : project1.html)에서로드되는 애니메이션 확장 div로 내 프로젝트를 토글하는 것입니다. 그래서 예, 나는 처음에 문서를로드 한 다음 애니메이션을 적용하려고합니다. –

이

$(this).animate({ height: newHeight }

가 불투명있는 동안 아마 당신이 애니메이션 있다고 생각

$(this).animate({ height: newHeight + 'px' }

출처

2011-10-12 19:35:43 Dutchie432

은 여전히 $ (this) .animate ({height : newHeight} 부분이 전혀 움직이지 않는 300px의 애니메이션을 재생합니다. –

문서의 높이에 애니메이션 적용 jQuery

답변

관련 문제