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 link

감사합니다.

Answer 1

내부에 다른 래퍼 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

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 - 1)/2의 인해 fullWidth/itemsCount/2가 아코디언의 오른쪽 테두리에 빈 곳이지만, fullWidth/(itemsCount - 1)/2 마지막 요소로 가끔 화면에서 disappeares.