Как мне оживить <div>?

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> увеличивается на 200 пикселей в каждом направлении, верхний и левый остаются прежними с первой анимации.Я также хотел бы обновить позицию.

Что здесь можно сделать?

Answer 1

Ваша вторая анимация выполняется одновременно, поэтому self.outerHeight () равен externalheight во время выполнения, а не когда анимация по ширине / высоте завершена.

Вам следуетвероятно, установите его на:

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');

Answer 2

Примите во внимание, что при выполнении следующего кода:

'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