使用JQuery从中心动画中成长

Question

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

感谢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}