Javascript 设置div的居中动画

如何设置该运动的动画，以便稍后调用该函数时该项将设置动画？我通常使用

$（this）。设置动画
，但不确定如何将其包装在其中，因为我正在计算它的位置。谢谢

jQuery.fn.center = function ()
{
    this.css("position","absolute");
    this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
        $(window).scrollTop()) + "px");
    this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) + 
        $(window).scrollLeft()) + "px");
    return this;
}

您可以使用您提到的
this.animate
，而不是使用
this.css

示例

this.animate({ 
  top : Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) + 
        $(window).scrollTop()) + "px"
},800,function(){  });

要设置动画，您需要在左/顶值上使用animate，但首先使用
css（）
将位置设置为绝对

我为此制作了一把小提琴，在这里：

在小提琴中，我还整理了一些东西，以确保插件更加健壮。
我只知道您正在将元素居中，但我不清楚动画如何。.请看我的答案，我添加了Luke，非常感谢！这非常有效。我添加了一个.stop（）动画，因为我希望动画根据悬停的打开和关闭来回移动。唯一的问题是动画框从屏幕顶部的中心开始，当我使用代码时，它使动画从左上角开始…如何使动画从对象的原始坐标开始？它只是在动画的第一个循环中，从左上角开始，然后移动到屏幕中央。真奇怪。谢谢我想这是因为x和y是从0开始的，没错。如果对象定位为“绝对”，则左上方的值将相对于屏幕（或第一个位置：相对祖先），因此它不会居中。技巧是在设置position=absolute的同时复制对象的当前位置。如前所述，在第23行，您将看到我通过
offset（）
获取元素位置，并将其复制到CSS中。
        // can't easily animate change of css "position"
        // so we just set it directly
        elt.css('position', 'absolute');

        // animate the position
        elt.animate({
            left: x,
            top: y
        });