使用 JQuery 从中心动画增长
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10351431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grow from center animation with JQuery
提问by mrK
I'm looking to have a popup div from a button. When the button is clicked, I want the popup to grow outwards from the center of the button and at the same time, slide to the center of the screen. I don't think this should be too hard but I can't find any snippets anywhere. Any help would be greatly appreciated.
我希望从按钮上弹出一个 div。单击按钮时，我希望弹出窗口从按钮中心向外生长，同时滑动到屏幕中心。我不认为这应该太难，但我在任何地方都找不到任何片段。任何帮助将不胜感激。
Thanks to the help from Jamie Dixon, I got this code working.
感谢 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);
回答by Jamie Dixon
You can use jQuery UI with the show method passing in "scale" as a parameter.
您可以将 jQuery UI 与传入“scale”作为参数的 show 方法结合使用。
$('#growwer').show("scale",{}, 1000);
To slide your element to the center o the page I've created a modified version of Tony L's jQuery function found here: Using jQuery to center a DIV on the screen.
要将您的元素滑动到页面中心，我创建了 Tony L 的 jQuery 函数的修改版本，可在此处找到：Using jQuery to center a DIV on the screen。
Update
更新
Here's a working example of the two animations running simultaniously:
这是同时运行的两个动画的工作示例：
To get this to work I included an extra parameter on the animatefunction passing in: {duration: durationLength, queue: false}
为了让它工作，我在animate传入的函数中包含了一个额外的参数：{duration: durationLength, queue: false}
