javascript - 如何让我的动画 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;
}

fiddle :http://jsfiddle.net/2vVpt/182/