将jQuery对话框动画到不同的位置 [英] Animating jQuery dialog to different position

问题描述

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

I am designing a webpage where I have got 6 dialog boxes in a grid layout. Each dialog box has a button. I want it to work this way: when user clicks on the button, the dialog box should get expand and the other boxes should move to the right side with proper alignment and shrink the box sizes. I am stuck in animating the boxes that are suppose to move to the right. Please help!

jQuery函数：

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

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

In the above code, the contents of dialog1 move to the right instead of box itself, dialog3 moves to the specified position without animation. Please hemp me animate these boxes.

推荐答案

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

You have to animate the jQuery UI widgets instead of the original elements:

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

这篇关于将jQuery对话框动画到不同的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！