Question

On my website i have a div with an absolute position in a parent div. What I want is when I click the div it has to enlarge and position in the middle of my browser.

What i tried is this:

$j("#mac").click(function(){
 $j('#mac').css({
        position: 'fixed'
    });

$j('#mac').animate({
    width: 923,
    height: 498,
    left: ($j(window).innerWidth() - 923)/2,
    top: ($j(window).innerHeight() - 498)/2
  }, 1000)});

It worked but what happened is that the #mac first positioned to the left top corner of my screen and than animate to the center of my screen. This make sense because of the usage of position fixed. But when I dont use that position the div wont position at the center.

So i don’t want to have te postioning at the left top corner of the screen but the div have to animate from his original position to the center of the screen.

Somebody know how to do this?

Thanks in advance!

Answer 1

When you change the CSS position to fixed, at the same time, find the current top and left positions of the DIV and set those as well. That should start the animation at the correct place.

var offset = $j('#mac').offset();

$j('#mac').css({
    position: 'fixed',
    top: offset.top,
    left: offset.left
});