要素をアニメートしますが、コンテナを中心に維持します

Question

現在、カスタムライトボックススクリプトを作成中です。イメージのサイズ変更のアニメーションがうまく機能していますが、小さな問題に遭遇しました。ライトボックスはユーザーの画面の中央に表示されますが、幅と高さをアニメーション化するとすぐに、画面中央には残りません。ちょうど古いの左と上の値を使用します。ここ

ライトボックス自体のマークアップは次のとおり

<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() { 


     } 
    }); 
} 

Answer 1

またマージン左マージントップをアニメーション：

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

要素のCSSの位置は「絶対的」である場合には、変更のマージントップ/トップに余白左と左。

EDIT：

$(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() 
}} 

！

Answer 2

私はあなたがあまりにもアニメーション化すべきだと思う余裕のと左の距離。