jQuery make inline div transition when neighboring element fades out

Question

I have 8 or more divs that are displayed in rows of 3 and are inline-block. When you click a div it fades out and the neighboring div moves into it's pace. Is there a way to make the divs slide across rather than just jump?

See here for my JSfiddle http://jsfiddle.net/xmq2x/

and code here:

$( ".box" ).click(function() {
$(this).fadeOut( "slow" );
});

Answer 1

You can try with Jquery animate() like this:

$( ".box" ).click(function() {
  $(this).animate({
      opacity : '0',
      width : '0'
  },function(){$(this).hide()});
});

An example http://jsfiddle.net/xmq2x/14/