使用JQuery从中心动画中成长

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

感谢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); 

工作实例

要将元素滑动到页面的中心，我在这里创建了一个Tony L’s jQuery函数的修改版本： 使用jQuery将DIV置于屏幕中心 。

工作实例

更新

这是两个同时运行的动画的工作示例：

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

为了实现这一点，我在传入的animate函数中包含了一个额外的参数： {duration: durationLength, queue: false}