どのように私は私のダイアログを表示していたときに、いくつかの効果

Question

で動的にjQueryのダイアログの高さと幅を大きくすることは、その後の私のダイアログの高さが100で、幅がバックグラウンドで100

よう

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

とロードデータであるとするとき、データが完全にロードされjquery ajaxには成功オプションがあり、そこからデータがロードされていると判断できるので、それらのデータをダイアログに表示します。私がダイアログに表示したいデータを、高さのようなより多くのスペースが必要とするデータを300とし、幅を300にする必要があるとします。その大きなデータをダイアログにペースすると、ダイアログは自動的にサイズ変更されますか？

、その後どのように私はプログラム的にダイアログの高さを増加させ、それを達成するためにどのように....徐々に高さと幅のようないくつかの効果が大きくなり、データが効果をフェードインでダイアログに表示される幅ができない場合。いくつかのコードで助けが必要です。おかげ

Answer 1

最初に隠されたダイアログエレメントの高さを計算することができます。前に幅を300pxに設定し、高さは設定しないで、クラス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を参照してください。

=== === UPDATE

マイjsfiddleを更新しました。

Answer 2

あなたは高さ/幅を知っているか、何とかそれを計算することができる場合は、あなたは

$('#yourDiv').animate({height: '400px', width: '200px'});