动画jQuery对话框到不同的位置

我正在设计一个网页，我在网格布局中有6个对话框。 每个对话框都有一个按钮。 我希望它以这种方式工作：当用户点击按钮时，对话框应该展开，其他框应该移动到右侧并正确对齐并缩小框大小。 我被困在动画那些假设向右移动的盒子里。 请帮忙！

jQuery函数：

$("#searchButton").click(function () { $("#dialog1").animate({"right": "+=50px"}, "slow"); $("#dialog3").dialogr({position: [800,400]},{duration:1500}); }) 

在上面的代码中，dialog1的内容向右移动而不是框本身，dialog3移动到指定的位置而没有动画。 请麻烦我给这些盒子添加动画效果。

Answer 1

您必须为jQuery UI小部件设置动画，而不是原始元素：

 $("#searchButton").click(function() { $("#dialog1").dialog("widget").animate({ right: "+=50px" }, "slow"); $("#dialog3").dialog("widget").animate({ left: "800px", top: "400px" }, 1500); });