CSS從右向左擴展寬度

Question

我需要建立一種類似jQuery手風琴的效果。 屏幕上有10個項目； 當鼠標懸停在某個項目上時，它的寬度會擴大。 如何使最后5個項目從右向左擴展？

我的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鏈接

謝謝。

Answer 1

您需要在內部添加另一個具有較大寬度的wrapper div，以確保浮動元素不會換行到下一行。 然后，當懸停的元素為＃5或更高版本時，將外部包裝div滾動到正確的位置：

$('.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鏈接

Answer 2

這個想法是在增加懸停元素的寬度時減少其他項目的寬度。

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最后一個元素有時會消失從屏幕上。