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

Question

我目前正在处理自定义灯箱脚本，需要一些帮助。 我的动画可以很好地调整图像大小，但是遇到了一个小问题。 灯箱显示在用户屏幕的中间，但是一旦我设置宽度和高度的动画，它就不会停留在屏幕中央，而仅使用旧的 left和top值。

这是灯箱本身的标记：

<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 ）放在屏幕#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位置为“绝对”，则将margin-top / margin-left更改为顶部和左侧。

编辑：

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

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

哪个更容易阅读！

Answer 2

我认为您也应该对边距和左距进行动画处理。