Animate inline-block movement with jQuery

Question

I have three divs with the following properties:

div.main-box {
    width: 100px;
    height: 100px;
    display: inline-block;
    padding: 20px;
    margin: 20px;
    border: 1px solid black;
}

They are side-by-side on the page:

 __  __  __
|__||__||__|

I remove two of them at a time based on a user interaction (e.g., the user clicks the third, and the first two disappear). After they are removed, the remaining box moves to the center.

As it is now, the box simply appears in the center. I would like to animate this movement.

Here is a jsFiddle for what I have now:

http://jsfiddle.net/4s4v9/

Is what I am asking possible? Thanks for your help!

Update:

What I'm asking doesn't seem to be possible. Can I hold the remaining box in place after the other boxes are removed and then animate it's movement?

Answer 1

To make something animate, you will need a property that can be manipulated, for example, "left" or "margin-left". You can animate inline or inline-block elements without positioning.

Try relative positioning instead. Set the parent container element (add one if you don't already have):

position: relative;

Set all child elements:

position: absolute;
top: 0;
left: 0px; // 200px, 400px, etc. respectively

Then do a fadeOut or hide on the elements:

$('#selector-for-box-1-and-2')
.fadeOut('slow', function() {

})

Then add in the animation in the animation complete function:

$('#selector-for-box-1-and-2')
.fadeOut('slow', function() {
    $('#selector-for-box-3').animate({
        left: 0px
    }, 1000);
})

You can also apply jQuery.masonry plugin, the animation will be handled automatically when you remove any elements.

Answer 2

Did you mean like this?

$('a#change-boxes').click(function () {
    var i = 1;
    $('div.main-box').each(function () {
        if (i <= 2) {
            $(this).hide(500, function(){
            $(this).remove();
            });
        }
        i++;
    });
});

Check here: http://jsfiddle.net/GmaPE/