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

如您所述，您可以使用this.css而不是this.animate。

示例

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

Demo

Answer 2

要设置动画，您需要在左/上值上使用动画，但首先使用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/

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

动画div的居中动画

2 个答案:

Demo