Smooth movement of non hidden div

[code_rum]

I have some div's one after another.
When i click anywhere the first div hides and other div's shifts to fill the empty space.
But the movement of other div which aren't hidden are not satisfying as it takes the place
but not smoothly.
I have no idea as how should i approach this problem

Here's a link of current scenario
http://jsfiddle.net/code_rum/Xb4ZX/

Thanks in advance

[LastMitch]

When i click anywhere the first div hides and other div's shifts to fill the empty space.
But the movement of other div which aren't hidden are not satisfying as it takes the place
but not smoothly.

You can take a look at this code here:

http://stackoverflow.com/questions/10213095/how-to-animate-divs-when-they-move-to-fill-empty-space-left-by-other-divs-that-f

There are 2 js demo from the link above which demonstrate how hidden div.

This involve not just jQuery but also CSS for the design.

[Troy III]

That's because you are using a pre-Toggler slide'n'fade (jQuery) animation.
Meaning, you are using a "toggle".
Which means:* the rest of the cubes will "jump" instead of "slide" in.*

[code_rum]

@LastMitch I saw that one but I couldn't make it work for div's in two rows.
I have made some changes. Now it works the way i wanted to some extent.
But still when a fourth div in second row moves to first row. The movement is not that smooth
Is there any way by which I can make it move smoother

Here's a link

http://jsfiddle.net/code_rum/Xb4ZX/8/