How do I animate both a resize and center on a dialog in jQuery UI?

Question

I've got a popup dialog made with jQuery UI that is 400 pixels wide. However, in some cases I want to forcibly change it to be 700 pixels wide. I could just do that immediately, but jQuery has some nice animation functions so I'd rather it happen smoothly.

I can animate the size change easy enough, but how do I keep it centered on the screen while resizing? Right now my function expands the box but then jerks it over to the center position once complete.

Here's what I'm doing currently:

$('#popup').parents('.ui-dialog:first').animate({
    width: 700
}, {
    complete: function() { $('#popup').dialog('option', 'position', 'center'); }
});

And here's a fiddle to see what I'm trying to do.

http://jsfiddle.net/PJ3GF/

I used different dimensions in the fiddle, but you get the idea.

Answer 1

you mean like this: http://jsfiddle.net/PJ3GF/1/

$('#popup').parents('.ui-dialog:first').animate({
    width:'400px',
    left:'50%',
    marginLeft:'-200px'
});

UPDATE:

it's not the best way but it works for this instance: http://jsfiddle.net/PJ3GF/2/

$('#popup').parents('.ui-dialog:first').animate({
    width:'400px',
    left:'50%',
    marginLeft:'-200px',
    top:'50%',
    marginTop:'-'+$(this).height()/3+'px'
});

needs a little calculation to get the correct height if the width changes!