Javascript 设置元素动画，但保持容器居中

我目前正在编写一个自定义lightbox脚本，需要一些帮助。我有动画的图像调整工作的伟大，但我遇到了一个小问题。灯箱显示在用户屏幕的中间，但是一旦我动画了宽度和高度，它就不会停留在屏幕的中心，只使用<强>旧<强>左和顶部值。 以下是lightbox本身的标记：

<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>

---

我认为您也应该设置页边距和左侧距离的动画。

还应设置页边距左侧和页边距顶部的动画：

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

如果元素CSS位置为“绝对”，则将页边距顶部/左侧更改为顶部和左侧

编辑：

在整个“动画”字符串的末尾，添加

.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).parent().animate({...});

为方便起见，最好也设置包含元素的变量

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

然后父级animate（）数据将如下所示：

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

---

这更容易阅读

是的，这就是我需要做的，但是我需要以与调整主图像容器大小相同的比率来设置容器左侧和顶部位置的动画。这就是设置

mainimg

的边距动画。我想/需要为父元素（

#jqgal_容器

）的边距设置动画…使用有关.parent（）的更多信息进行编辑，谢谢！除非我弄错了，否则这些计算不会考虑用户在页面上的滚动位置（即scrollTop）？不，不会，但添加滚动位置的内容很容易，只需将数字添加到数量中即可。再次编辑！编辑！我忘了有些人允许在他们的网站上滚动！我为jQuery制作了一个自定义的滚动条插件，现在总是让我的标签的CSS溢出：隐藏！

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