javascript - expand / collapse floated divs on mouseover without falling to the next row -

i'm looking ideas on how resolve little problem have when expanding divs on mouseover.

i have series of divs percentage width floated left. when move cursor on 1 div grow 3 times size, moving divs after right. right now, 4 divs fits on signgle row, problem when move mouse on last 2 elements of each row, fall next row since not fit anymore in current row.

here's example of i've been working far:

css:

    #mosaicwrapper{ width:70%; background:#ccc}    .mosaic{ width:20%; background:#06c; height:150px; float:left; margin:20px 20px 0 0; color:white; text-align:center; font-size:74px; position:relative; cursor:pointer} 

code:

var wrapper = $('#mosaicwrapper'); var mosaic = $('.mosaic'); var mosaicwidth = mosaic.outerwidth(true); var elesperrow= math.floor(wrapper.width()/mosaicwidth); var expandedwidth = (mosaicwidth*(elesperrow-1))-mosaic.margin('right'); var lastitems = []; var intialwidth = mosaic.width();   (var = elesperrow; < mosaic.length; = + elesperrow){     var litem = - 1;     lastitems.push(litem); }  mosaic.each(function(index, element) {     thisitem = $(this);     thisitem.mouseover(function(e) {                         $(this).stop(false, false).animate({'width':expandedwidth},500);         if($.inarray(index, lastitems) > -1){             var last = index - 1;                            };     });      thisitem.mouseleave(function(e) {         $(this).stop(false, false).animate({'width':intialwidth},500);     }); }); 

example working here: http://jsfiddle.net/xjm3h/3/

i had idea of cutting previus 2 divs , pasting them after current div, without luck since cursor losses div because 1 moves.

does has idea on how resolve problem?

thanks in advance.

you can this... index of hovered element , animate width of previous element

mosaic.each(function(index, element) {     thisitem = $(this);     thisitem.mouseover(function(e) {         mosaic.eq($(this).index()-1).stop().animate({'width':0},500);         $(this).stop().animate({'width':expandedwidth},500);          if($.inarray(index, lastitems) > -1){             var last = index - 1;         }     });      thisitem.mouseleave(function(e) {         mosaic.eq($(this).index()-1).stop().animate({'width':intialwidth},500);         $(this).stop(false, false).animate({'width':intialwidth},500);     }); });