Question

我试图让<div>在屏幕上居中，但这失败了。

以下是代码：

var self = $(this);
self.animate({
    'top': ($(window).height() / 2) - (self.outerHeight() / 2),
    'left': ($(window).width() / 2) - (self.outerWidth() / 2)
}, 600, 'swing', function () {
    self.animate({
        'width': '+=200px',
        'height': '+=200px', 
        'top': ($(window).height() / 2) - (self.outerHeight() / 2), //NO UPDATE
        'left': ($(window).width() / 2) - (self.outerWidth() / 2) //NO UPDATE
    }, 600, 'linear');
});

所以主要是在<div>在每个方向上增长200px的第二个动画之后，顶部和左侧与第一个动画保持相同。我也想更新这个职位。

这里可以做些什么？

Answer 1

与运行以下代码时相比，请注意：

'top': ($(window).height() / 2) - (self.outerHeight() / 2), //NO UPDATE
'left': ($(window).width() / 2) - (self.outerWidth() / 2) //NO UPDATE

从self.outerHeight()得到的值是绝对当前值（没有增加的数量），因为jQuery会慢慢增加大小以给出动画效果。

要使其有效，您必须手动添加金额：

'top': ($(window).height() / 2) - ((self.outerHeight()+200) / 2), // notice the +200

Answer 2

你的第二个动画全部同时执行，所以self.outerHeight（）等于执行时的外部高度，而不是宽度/高度的动画完成时。

您应该将其设置为：

self.animate({
            'width': '+=200px',
            'height': '+=200px', 
            'top': ($(window).height() / 2) - ((self.outerHeight() +200 )/ 2), //NO UPDATE
            'left': ($(window).width() / 2) - ((self.outerWidth() +200 )/ 2) //NO UPDATE
        }, 600, 'linear');

如何设置<div>动画？</div>

2 个答案: