如何动态增加jQuery对话框的高度和宽度有一定效果

Question

当我显示对话框时，对话框的高度为100，宽度为100，例如

$("#dialog").dialog({
    autoOpen: true,
    height: 100,
    width: 100,
    modal: false,
    draggable: false,
    resizable: false,
});

并在后台加载数据，以及由于jquery ajax具有成功选项而完全加载数据时，从那里我们可以确定数据已加载，然后将这些数据显示在对话框中。假设我要显示到对话框中的数据需要更多空间，例如高度应为300，宽度应为300。所以当我将大数据放到对话框中时，对话框是否会自动调整大小？

如果没有，那么我怎么能以编程的方式增加对话框的高度和宽度，一些效果，例如逐渐增加高度和宽度，以及数据将以淡入效果出现在对话框中....如何实现。需要一些代码的帮助。谢谢

Answer 1

首先计算隐藏对话框元素的高度。在将宽度设置为300px，但不设置高度之前，添加class ui-widget。

HTML：

<div id="dialog" class="ui-widget">...

CSS：

#dialog {
    display: none;
    width: 300px;
}

JS（对话框填充为16px）：

var iHeight = $('#dialog').height() + 16;

创建对话框后，为对话框包装器设置新的宽度，如果当前高度小于所计算的高度，则开始设置动画。

JS：

if ($("#dialog").height() < iHeight) {
    $("#dialog").parent().width(300 + 50);
    $("#dialog").animate({ height: iHeight, width: '300px'}, 500);
}

另请参阅我的jsfiddle。

===更新===

我更新的jsfiddle。