使用JQuery从中心动画增长

Question

我正在寻找一个按钮的弹出div。点击按钮时，我希望弹出窗口从按钮的中心向外生长，同时滑动到屏幕中心。我不认为这应该太难，但我无法在任何地方找到任何片段。任何帮助将不胜感激。

感谢Jamie Dixon的帮助，我得到了这段代码的工作。

$('#grower').css({ 
    backgroundColor: '#FFFFFF', 
    border: '10px solid #999', 
    height: '0px', 
    width: '0px', 
    color: '#111111', 
    fontWeight: 'bold', 
    padding: '10px', 
    display: 'none', 
    position: 'absolute', 
    left: $(this).position().left, 
    top: $(this).position().top 
}).appendTo('#overlay').fadeIn(0).animate({ 
    position: 'absolute', 
    height: '200px', 
    width: '600px', 
    marginTop: '-120px', 
    marginLeft: '-320px', 
    display: "", 
    top: ((($(parent).height() - $(this).outerHeight())/2) + $(parent).scrollTop() + "px"), 
    left: ((($(parent).width() - $(this).outerWidth())/2) + $(parent).scrollLeft() + "px") 
}, 1000); 

Answer 1

你可以使用jQuery UI和show方法传入“scale”作为参数。

$('#growwer').show("scale",{}, 1000); 

Working example

要将元素滑动邻的页面我创建托尼L的jQuery函数的修改版本在这里找到中心：Using jQuery to center a DIV on the screen。

Working Example

更新

这里的同时放跑了两个动画的工作示例：

http://jsfiddle.net/wNXLY/1/

为了得到这个工作，我包括在animate功能一个额外的参数传入：{duration: durationLength, queue: false}