요소에 애니메이션을 적용하지만 컨테이너 중심 유지

현재 사용자 정의 라이트 박스 스크립트를 작성 중이며 도움이 필요합니다. 이미지 리사이징을위한 애니메이션이 훌륭하게 작동했지만 작은 문제가 발생했습니다. 라이트 박스는 사용자 화면 중간에 표시되지만 너비와 높이를 움직이면 화면 중앙에 남아 있지 않고 단지 old 왼쪽 및 위쪽 값만 사용합니다.요소에 애니메이션을 적용하지만 컨테이너 중심 유지

<div id="jqgal_container"> 
    <div id="jqgal_nav_left" class="jqgal_nav">&lt;</div> 
    <div id="jqgal_main"> 
     <div id="jqgal_main_img"></div> 
     <div id="jqgal_footer"> 
      <div id="jqgal_main_caption"><p></p></div> 
      <div id="jqgal_thumbnav_left" class="jqgal_thumbnav">&lt;</div> 
      <div id="jqgal_thumbs"> 
       <div id="jqgal_thumbs_container"> 
        <ul></ul> 
       </div> 
      </div> 
      <div id="jqgal_thumbnav_right" class="jqgal_thumbnav">&gt;</div> 
     </div> 
    </div> 
    <div id="jqapp_nav_right" class="jqgal_nav">&gt;</div> 
</div>

표시되는 이미지가 <img /> 요소로 #jqgal_main_img 내에 저장된다

여기 라이트 자체 마크 업이다. #jqgal_main_img의 너비와 높이를 움직이게하지만, 전체 컨테이너 (#jqgal_container)를 화면의 중앙에 유지하기를 원합니다.

제 질문은 어떻게 자식 요소의 너비를 움직이게 할 수 있습니까? 그럼에도 불구하고 컨테이너의 위쪽과 왼쪽 위치를 각각 움직이게 할 수 있습니다. 그러면 중앙에서 확장되어 커지는 것처럼 보입니까? 다음과 같이

순간에 이미지 컨테이너의 폭과 높이를 애니메이션하는 코드는 같습니다

_resizeToFit : function(img_width, img_height, compFunc) 
{ 
    // Calculate the width and height needed: 
    var req_width = img_width; 
    var req_height = img_height; 

    this._elements.mainimg.animate({ width: req_width }, { 
     duration: 'fast', 

     complete: function() { 
      $.jqgal._elements.footer.width(req_width); 
      $.jqgal._elements.mainimg.animate({ height: req_height }, 'fast', function() { 
       if(compFunc != undefined) { compFunc.call(this); } 
      }); 
     }, 

     step : function() { 


     } 
    }); 
}

출처

2012-01-12 BenM

또한 애니메이션 마진 왼쪽 및 여백 가기 :

"margin-left" : ($(window).width() - req_width)/2 
    "margin-top" : ($(window).height() - req_height)/2

원소 CSS 위치 "절대 '변화 마진 정상/마진 좌측 상단과두면.

편집 :

$(this).parent().animate({...});

쉽게 들어,가 최고의 수 있습니다 : 전체 '애니메이션'문자열의 끝에서

, 추가

.parent().animate({ 
      "margin-left" :)($(window).width() - req_width)/2) + this._elements.mainimg.parent().scrollLeft(), 
    "margin-top" : (($(window).height() - req_height)/2) + this._elements.mainimg.parent().scrollTop() 
}}

또는 콜백 함수에서

요소를 포함하는 변수를 설정하십시오 ...

$this = this._elements.mainimg; 
$parent = $this.parent();

그런 다음 부모 애니메이션() 데이터는 다음과 같이 보일 것이다 :

  "margin-left" :)($(window).width() - req_width)/2) + $parent.scrollLeft(), 
    "margin-top" : (($(window).height() - req_height)/2) + $parent.scrollTop() 
}}

읽기 좀 더 쉽게 어느!

출처

2012-01-12 10:16:48

그것은'mainimg'의 여백을 움직이는 것입니다. 부모 요소 ('#jqgal_container')의 여백을 애니메이트 할 필요가 있습니다. ... – BenM

.parent()에 대한 자세한 정보로 편집 됨 –

고마워요! 비록 내가 잘못 생각하지 않는다면, 그 계산은 사용자의 스크롤 된 위치 (즉, scrollTop)를 고려하지 않을 것입니까? – BenM

-1

난 당신이 너무 애니메이션한다고 생각 여백의 왼쪽 거리.

출처

2012-01-12 10:12:58

네, 그렇게해야합니다.하지만 주 이미지 컨테이너의 크기가 조정되는 것과 같은 비율로 ** 컨테이너 **의 왼쪽 위와 맨 위 위치에 애니메이션을 적용해야합니다. – BenM

요소에 애니메이션을 적용하지만 컨테이너 중심 유지

답변

관련 문제