Question

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 function:

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

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.

Answer 1

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