javascript - 动画 div 的居中

Question

我如何为这个动作设置动画，以便稍后调用该函数时，项目将设置动画？我通常使用$(this).animate但不确定如何将其包装在其中，因为我正在计算它的位置。谢谢。

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

Answer 1

要制作动画，您需要在左侧/顶部值上使用动画，但首先将位置设置为绝对使用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
        });

我为此创建了一个小提琴，在这里：http: //jsfiddle.net/lingo/CkRUd/2/

在小提琴中，我还整理了一些东西以确保插件更强大。

Answer 2

而不是使用this.css你可以使用this.animate你提到的。

例子

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

演示