how to animate div from its center
<p>I am trying to animate a div tag from center. Initially I want the div tag to be none visible. when user clicks on link then this div tag should animate from its center. How can I achieve this using jquery. Here is my current code.</p>

<pre><code>&lt;a href="#" class="linkone"&gt;link one&lt;/a&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
&lt;section class="one"&gt;one&lt;/section&gt;
</code></pre>

<p>here is css</p>

<pre><code>.one {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        border: 1px solid red;
        background: lightblue;
    }
</code></pre>

<p>and here is my jquery</p>

<pre><code>$('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);
});
</code></pre>
