如何使我的动画div仅向外扩展，以便中间位于同一位置？

Question

现在的样子演示：http://jsfiddle.net/2vVpt/180/

我正在使用的jQuery代码：

$("#blinkandresize").click(function(){
    $(this).fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).animate({height: 400, width: 400})
});

现在我如何让这个圈子向外扩展，并留在同一个地方？

Answer 1

绝对定位您的圈子，然后使用以下代码制作动画效果

$("#blinkandresize").fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300).animate({
    'width': '+=400px',
    'left': '-=200px',
    'top': '-=200px',
    'height': '+=400px'
  }, 600);

CSS：

#blinkandresize {
    position:absolute;
    top: 250px;
    border-radius: 1000px;
    left: 250px;
    border-radius: 50%;
    background-color: #334;
    height: 50px;
    width: 50px;
}

小提琴：http://jsfiddle.net/2vVpt/182/

Answer 2

将其绝对置于容器中

<div id="container">
    <div id="blinkandresize"></div>
</div>

http://jsfiddle.net/2vVpt/184/