Javascript 如何从div的中心设置其动画

我正在尝试从中心设置div标记的动画。最初，我希望div标记不可见。当用户单击链接时，该div标记应从其中心开始设置动画。如何使用jquery实现这一点。这是我目前的代码

<a href="#" class="linkone">link one</a><br><br><br><br>
<section class="one">one</section>

这是我的jquery

$('a').on('click', function (e) {
    e.preventDefault();
    var w = 200; //$('.one').outerWidth();
    var h = 200; //$('.one').outerHeight();
    var x = $('.one').width() / 2;
    var y = $('.one').height() / 2;
    var startW = h - y/2;
    var startH = w - x/2;
    var endTop = y - h/2;
    var endLeft = x - w/2;

    $('.one').animate({
        opacity: 1,
        width: (w+200) + 'px',
        height: (h+200) + 'px',
        top: endTop+'px',
        left: endLeft+'px'
    }, 1000);

    console.log(endLeft);
});

大概是这样的：

请注意，由于

.one

div没有绝对或相对地定位，因此top和left的动画没有任何作用

$('a').on('click', function (e) {
    e.preventDefault();
    var w = 200; //$('.one').outerWidth();
    var h = 200; //$('.one').outerHeight();
    var x = $('.one').width() / 2;
    var y = $('.one').height() / 2;
    var startW = h - y/2;
    var startH = w - x/2;
    var endTop = y - h/2;
    var endLeft = x - w/2;

    $('.one').animate({
        opacity: 1,
        width: (w+200) + 'px',
        height: (h+200) + 'px',
        top: endTop+'px',
        left: endLeft+'px'
    }, 1000);

    console.log(endLeft);
});

$('.linkone').on('click', function (e) {
    e.preventDefault();
    var w = 200; //$('.one').outerWidth();
    var h = 200; //$('.one').outerHeight();
    var x = $('.one').width() / 2;
    var y = $('.one').height() / 2;
    var startW = h - y/2;
    var startH = w - x/2;
    var endTop = y - h/2;
    var endLeft = x - w/2;

    $('.one').show().animate({
        opacity: 1,
        width: (w+200) + 'px',
        height: (h+200) + 'px',
        marginTop: 0 + 'px'
    }, 1000);

    console.log(endLeft);
});