Animate jQuery UI dialog auto resize

I have a dialog with a dynamic form inside that can increase the height of the dialog. autoResize is set to true, width is 500. Is there any way to animate the dialog开发者_如何转开发 resize when more content is added?

---

Animating dialog size, while staying in the center of the screen

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

---

Originally I was using .show('fade') and the size of the dialog would jump whenever .show was called. When using the effect .show('fast') or .show('slow'), the dialog is resized in a sliding fashion which works for me.

---

When i was using @Steven's answer i have issues with content size, like @jedierikb said in comment. So i created this code and it works.

$(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);
        }
    }
});