Animate hộp thoại giao diện người dùng jQuery tự động thay đổi kích thước

Question

Tôi có một hộp thoại có dạng động bên trong có thể tăng chiều cao của hộp thoại. autoResize được đặt thành true, width là 500. Có cách nào để tạo hoạt ảnh cho hộp thoại thay đổi kích thước khi có thêm nội dung không?

Answer 1

Ban đầu tôi đã sử dụng .show('fade') và kích thước của hộp thoại sẽ nhảy bất cứ khi nào .show được gọi. Khi sử dụng hiệu ứng .show('fast') hoặc .show('slow'), hộp thoại được thay đổi kích thước theo kiểu trượt phù hợp với tôi.

Answer 2

Animating kích thước hộp thoại, trong khi ở trong trung tâm của màn hình

jQuery("#dialog").dialog("widget").animate({ 
    width: '400px', 
    height: '110px' 
    }, { 
    duration: 500, 
    step: function() { 
    jQuery("#dialog").dialog('option', 'position', 'center'); 
    } 
}); 

Answer 3

Khi tôi đã sử dụng @ câu trả lời của Steven tôi có vấn đề với kích thước nội dung, như @jedierikb nói trong nhận xét. Vì vậy, tôi đã tạo mã này và nó hoạt động.

$(dialogSel).dialog("widget").animate({ 
    width: 100, 
    height: 200 
}, { 
    duration: 200, 
    step: function (now, tween) { 
     if (tween.prop == "width") { 
      $(dialogSel).dialog("option", "width", now); 
     } else { 
      $(dialogSel).dialog("option", "height", now); 
     } 
    } 
});