Animating jQuery dialog to different position

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 dialo开发者_开发百科g1 move to the right instead of box itself, dialog3 moves to the specified position without animation. Please hemp me animate these boxes.

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