animate absolute div to fixed div

Question

На моем сайте у меня есть div с абсолютной позицией в родительском div. То, что я хочу, - это когда я нажимаю div, который он должен увеличить и разместить в середине моего браузера.

Что я попытался это:

$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)}); 

Он работал, но то, что произошло то, что #mac первый расположен в левом верхнем углу моего экрана и чем анимировать в центре моего экрана. Это имеет смысл из-за использования фиксированной позиции. Но когда я не использую эту позицию, позиция div не будет находиться в центре.

Таким образом, я не хочу, чтобы я размещался в левом верхнем углу экрана, но div должен анимироваться из его исходного положения в центр экрана.

Кто-нибудь знает, как это сделать?

Заранее благодарен!

Answer 1

Если вы изменили положение CSS на фиксированное, в то же время, найдите текущую верхнюю и левую позиции DIV и установите их также. Это должно начать анимацию в правильном месте.

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

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