Javascript jQuery：在“单击”时动画 Div 调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7296955/
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
jQuery: Animating Div Resize on 'Click'
提问by Zakman411
I have a div I'm using to show the user a status. Its width is relative to the percentage (0-100). Upon click of a button, I'd like to animate the width (in pixels) of that div. Any input on the best way to go about this? I'm already using jQuery, I assume it will use that to animate? (My panel is initially hidden, hence the .live function).
我有一个用于向用户显示状态的 div。它的宽度是相对于百分比 (0-100) 而言的。单击按钮后，我想为该 div 的宽度（以像素为单位）设置动画。有关解决此问题的最佳方法的任何意见？我已经在使用 jQuery，我假设它会使用它来制作动画？（我的面板最初是隐藏的，因此是 .live 功能）。
$('#slider50').live("click", function() {
// Animate here
});
回答by Bassem
As stated by PeeHaa you can use the .animate() jQuery function to expand you're div's width as shown in the example below:
正如 PeeHaa 所说，您可以使用 .animate() jQuery 函数来扩展 div 的宽度，如下例所示：
$("#button").click(function() {
$("#slider").animate({
width: '+=30px'
}, 1000);
});
回答by GoGoGarrett
An easy solution that I think would work would be some something similar to this:
我认为可行的简单解决方案类似于以下内容：
$("#slider50").live("click", function() {
$(this).slideDown();
/* or something like this
$(this).animate({
'width' : '500px',
'height': '500px'
});
*/
});
Hope this helps
希望这可以帮助
