JQuery UI hide/show div position jumps on Chrome

Question

I was able to fix your problem. If you read my comment on your initial post, the inline-block property was fooling you a little. If you removed that, then you see that the yellow box, before clicking the button, now is positioned where the box was sliding down then right to. So when jQuery fired the event, for some reason it thought the position was at that spot and told it to start the animation there. What you needed to do was make box1 float left and box2 and box3 float right. Then right under those 3 divs, add another div. This div is a "clear" div. Basically it informs the floated elements how to align. Here is my modified JSFiddle:

http://jsfiddle.net/6yj8f/

EDIT: I added the wrong JSFiddle link.

Here is my code:

HTML:

<body>
    <input type = "button" id = "button" value = "button">
    <div id = "wrapper">
        <div id = "box1"></div>
        <div id = "box2"></div>
        <div id = "box3"></div>
        <div class="clear"></div>
    </div>
</body>

CSS:

.clear {
    clear: both;
}

#wrapper {
    width: 300px;
    height: 150px;
    border: 1px solid black;
}

#box1 {
    width: 150px;
    height: 100px;
    border: 1px solid blue;
    display: block;
    float: left;
}

#box2 {
    width: 120px;
    height: 120px;
    border: 1px solid yellow;
    float: right;
    display: block;
}
#box3 {
    width: 120px;
    height: 100px;
    border: 1px solid red;
    float: right;
    display: none;
}

jQuery:

$(document).ready(function(){
$('#button').click(function(){
        $('#box2').hide( "drop", { direction: "right" }, 300, function () { 
            $('#box3').show( "drop", { direction: "right" }, 300 );
        });
    });
});