Q:

jQuery UI - Slide Out and Push Adjacent Content Over

I'm fairly new to jQuery UI and I'm trying to do a simple animation. When the animation is triggered, I want a button to slide out and push any content next to it over to fill in the space. 
Using the slide animation, I've managed to get the button to slide out, but the content pops into the new position rather than being pushed over by the sliding button. As an added problem, the button seems to pop into it's full size after finishing the slide animation.
Q: How do I show an slide an object out while sliding over content that current occupies that space? 
JSFiddle
http://jsfiddle.net/Dragonseer/z8mAY/
Current Code
$("#deleteButton").hide();
$("#editButton").click(function()
{
    $("#deleteButton").toggle("slide", { direction: "right" }, 1500);                          
});

A:

Here's my take on your issue, but it uses CSS for animation instead of jQuery, which works better in modern browsers and mobile/tablets, but not so much for older versions of IE:
http://jsfiddle.net/z8mAY/21/
CSS:
div {
    display: flex;
}

article {
    width:100%;
    margin: 5px;
    transition: all 1s;
}

div button {
    -moz-box-sizing: border-box;
    width: 0;
    transition: all 1s;
    float:right;
    overflow:hidden;
    opacity:0;
}

.expanded article {
    width: calc(70% - 5px);

}
.expanded button {
    width: 30%;
    opacity:1;
}

JS:
$("#editButton").click(function()
{
    $('div').toggleClass('expanded');
});

I've kept it as close to the original as I could, but in production, I would likely use relative/absolute positioning for the button, keep it a fixed width, and slide it in.  Also, you'll need to use all the browser prefixes for the CSS you want to support, I only included the ones necessary to work in firefox.

