Question

I have a position: absolute DIV on the document.
I want it to (wherever it is on the document) get to the center while growing to a certain size (all is being animated)
I tried to use the jQuery’s animate:

$('#el').animate({
        width: 600,
        height: 600,
        top: "-20%",
        left: "-50%"
    },1200);

with many variations but I just can’t set my mind into how the mathematics should occur.

Answer 1

You need to calculate the top and left based on the current window’s width and height, subtracting the target DIV’s with and height as required and divide the result by 2 to get the centre point.

For example, to calculate the left position with a current window’s width = 1200 pixels and a DVI target width of 600 pixels you can do the following:
(WindowWidth – DivTargetWidth) / 2 = leftPosition;
(1200 – 600) / 2 = 300;

The same applies to calculating the top position from the relevant height values.

The following should work:

var targetWidth = 600;
var targetHeight = 600;
var targetTopPosition = ($(window).height() - targetHeight) / 2;
var targetLeftPosition = ($(window).width() - targetWidth) / 2;

console.log(targetTopPosition);

$('#el').animate({
    width: targetWidth,
    height: targetHeight,
    top: targetTopPosition,
    left: targetLeftPosition
}, 1200);​

DEMO – Centering and enlarge a DIV

Here is the link of the full-screen version of the above demo.