CSS從右向左擴展寬度

我需要構建一個像jQuery的手風琴效果。我有10個項目填滿屏幕;當鼠標懸停在項目上時，它的寬度會擴大。我如何才能使它從最後5個項目的右向左擴展？CSS從右向左擴展寬度

我的HTML：

<div class="wrap"> 
    <div style="width: 165.25px; background: rgb(228, 228, 230);" class="item"></div> 
    <div style="width: 165.25px; background: rgb(35, 123, 192);" class="item"></div> 
    <div style="width: 165.25px; background: rgb(20, 4, 4);" class="item"></div> 
    <div style="width: 165.25px; background: rgb(182, 159, 36);" class="item"></div> 
    <div style="width: 165.25px; background: rgb(162, 169, 180);" class="item"></div> 
    <div style="width: 161px; background: rgb(37, 29, 4);" class="item"></div> 
    <div style="width: 161px; background: red;" class="item"></div> 
    <div style="width: 161px; background: rgb(88, 45, 45);" class="item"></div> 
    <div style="width: 161px; background: rgb(202, 41, 176);" class="item"></div> 
    <div style="width: 161px; background: rgb(24, 207, 185);" class="item"></div> 
</div>

這是我的CSS：

.wrap{ 
    width:100%; 
    float:left; 
    height: 300px; 
    overflow: hidden; 
} 

.item { 
    float:left; 
    height: 100%; 
    display: block; 
}

jQuery代碼：

$('.item').each(function(e){ 
    $(this).css('width', ($(this).parent().width()/10)); 
}); 

$('.item').on('mouseenter', function(event) { 
    $(this).stop().animate({width: "50%"}, {duration: 500}); 
}).on('mouseleave', function(event) { 
    $(this).stop().animate({width: ($(this).parent().width()/10)}, {duration: 500}); 
});

jsFiddle link

感謝。

來源

2014-10-02 thanh

你需要添加另一個包裝div，裏面有一個很大的寬度，這可以確保你的浮動元素不會換行到下一行。然後，滾動外包裹的div到正確的位置時，懸停元素＃5或更高版本：

$('.item').on('mouseenter', function(event) { 
    //Animate width 
    $(this).stop().animate({width: $(this).parent().parent().width()/2}, {duration: 500}); 
    if($(this).index() >= 5){ 
     //Animate scrollLeft 
     var marginLeft = $(this).parent().parent().width()/10 * 4; 
     $(this).parent().parent().stop().animate({scrollLeft: marginLeft + 'px'}, {duration: 500}); 
    } 
}).on('mouseleave', function(event) { 
    //Animate width 
    $(this).stop().animate({width: ($(this).parent().parent().width()/10)}, {duration: 500}); 
    //Animate scrollLeft 
    $(this).parent().parent().stop().animate({scrollLeft: 0}, {duration: 500}); 
});

你可以看到它在這裏工作：jsFiddle link

來源

2014-10-02 08:26:33 Borre

這樣做是爲了減少在其他物品的寬度增加了懸停元素的寬度。

JSFiddle。

var items = $('.item'); 
var itemsCount = items.length; 
var fullWidth = $('.item:first').parent().width(); 

items.each(function() 
{ 
    $(this).css('width', fullWidth/itemsCount); 
}); 

items.on('mouseenter', function() 
{ 
    items.not(this).stop().animate({ width: fullWidth/itemsCount/2 }, 500); 
    $(this).stop().animate({ width: "50%" }, 500); 
}); 

items.on('mouseleave', function() 
{ 
    items.stop().animate({ width: fullWidth/itemsCount }, 500); 
});

有一個奇怪的事情：由於fullWidth/itemsCount/2，而不是正確的fullWidth/(itemsCount - 1)/2有手風琴的右邊框空位置，但與去年fullWidth/(itemsCount - 1)/2從元素有時屏幕disappeares。

來源

2014-10-02 08:27:02 Regent

CSS從右向左擴展寬度

回答

相關問題