Question

我有一个用400像素宽的jQuery UI制作的弹出对话框。但是，在某些情况下，我想强制将其更改为700像素宽。我可以立即这样做，但jQuery有一些很好的动画功能，所以我宁愿它顺利发生。

我可以轻松地为尺寸变化设置动画，但在调整大小时如何将其保持在屏幕中央？现在我的功能扩展了盒子，但是一旦完成就把它猛拉到中心位置。

这是我目前正在做的事情：

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

这是一个小提琴，看看我想要做什么。

http://jsfiddle.net/PJ3GF/

我在小提琴中使用了不同的尺寸，但你明白了。

Answer 1

你的意思是这样的：http://jsfiddle.net/PJ3GF/1/

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

<强>更新

它不是最佳方式，但适用于此实例：http://jsfiddle.net/PJ3GF/2/

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

如果height发生变化，

需要一点计算才能得到正确的width

如何为jQuery UI中的对话框设置调整大小和居中动画？

1 个答案: