Floated element's absolute positioned content broke layout and crashes animation

Question

I am creating image gallery and I want to add to each element expanding menu on click.

I want to recreate iTunes 11 album view effect.

I put my images as a grid using html unordered list

<ul>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    <li><div class="box"></div></li>
    ...
    <li><div class="box"></div></li>
    <li class="clear"></li>
</ul>

Then using jQuery I wrote a function that triggered when I click on li element, adding to its another div, and to this div loads the menu.

$("li").click( function() {

    $(this).append("<div class='container'></div>");

    var cont = $(".container", $(this));

    cont.html("<div class='menu'><div class='content'></div></div>");

    var item_height = $(this).outerHeight();
    var cont_height = $(".content", cont).outerHeight();

    $(".content", cont).css({ height:0 });

    $(".content", cont).stop().animate({ height: cont_height + "px" });    

   $(this).css({height: (item_height+cont_height) + "px"});


} );

And the major problem is when I click on li element the "iTunes effect" doesn't work - menu appears but without any animation, and to go further it is breaking the whole layout.

Demo: http://jsfiddle.net/puz219/VmrEG/

Is there any way to fix the animation and itself the layout.

Answer 1

Did some small changes, also added that only one bar can be open at the same time with

.remove()

Check it out here http://jsfiddle.net/VmrEG/3/

Here the new fiddle with rows. You can add as much elements in a row as you like

http://jsfiddle.net/VmrEG/6/