展開/摺疊浮動divs鼠標懸停沒有下降到下一行

Question

我正在尋找一些想法，如何解決我在鼠標懸停時擴大div的一個小問題。

我有一系列的百分比寬度百分比漂浮在左邊。當我將光標移動到一個div上時，它會增長3倍，將所有div移動到右邊。現在，只有4個div可以放在signgle行上，問題是當將鼠標移動到每行的最後兩個元素上時，它們將落入下一行，因爲它們不適合當前行。

這裏是我到目前爲止一直在工作的例子：

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} 

代碼：

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(); 


for (var i = elesPerRow; i < mosaic.length; i = i + elesPerRow){ 
    var lItem = i - 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); 
    }); 
}); 

例子在這裏工作： http://jsfiddle.net/xjm3h/3/

我有一個想法切割前兩個divs和pastin克他們在當前div之後，沒有任何運氣，因爲光標丟失div，因爲這個也移動。

有沒有人有如何解決這個問題的想法？

在此先感謝。

Answer 1

你可以做這樣的事情......懸停元素的 獲取索引，然後以前的動畫元素

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); 
    }); 
});