jquery - 使用 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

您可以通过将“scale”作为参数传递给 show 方法来使用 jQuery UI。

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

Working example

为了将元素滑动到页面中心，我创建了 Tony L 的 jQuery 函数的修改版本，可在此处找到:Using jQuery to center a DIV on the screen .

Working Example

更新

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

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

为了使其正常工作，我在传入的 animate 函数中包含了一个额外的参数:{duration:urationLength,queue: false}