100％幅のコンテナ内のdivをアニメーション化する

Question

この問題は悩んでいます。私は5列のdivがお互いに浮かんでいる。それをホバリングすると、吊るされたdivはアニメーションでその幅を拡張する必要があります。私はその部分をカバーしていましたが、私の問題はそのdivを動かすと最後のdivが下に現れます（100％幅のコンテナを超えていることを意味します）。

jsfiddle

$(document).ready(function() { 
 
    var boxWidth = $(".box").width(); 
 
    $(".box").mouseenter(function() { 
 
    $(this).animate({ 
 
     width: "30%" 
 
    }); 
 
    }).mouseleave(function() { 
 
    $(this).animate({ 
 
     width: boxWidth 
 
    }); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.box { 
 
    height: 100vh; 
 
    width: 20%; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box" style="background:red"></div> 
 
<div class="box" style="background:grey"></div> 
 
<div class="box" style="background:yellow"></div> 
 
<div class="box" style="background:green"></div> 
 
<div class="box" style="background:#000000"></div>

Answer 1

をおflexを好きなら、それを行うよりも、この方法：

body { 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.boxes { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: nowrap; 
 
    width: 100%; 
 
} 
 
.box { 
 
    height: 100vh; 
 
    flex: 1 1 auto; 
 
    transition: flex-grow .3s ease-in-out; 
 
} 
 
.box:hover { 
 
    flex-grow: 1.5; 
 
}

<div class="boxes"> 
 
    <div class="box" style="background:red"></div> 
 
    <div class="box" style="background:grey"></div> 
 
    <div class="box" style="background:yellow"></div> 
 
    <div class="box" style="background:green"></div> 
 
    <div class="box" style="background:#000000"></div> 
 
</div>

をここで

は、私がこれまでにやっていることです

フレックスのいいガイドhere。

同コードはJSFiddleです。

Answer 2

1つのdivの幅を30％に変更すると、他のdivは17.5％（70％/ 4）の幅に縮小する必要があります。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.wrap { 
 
background:black; 
 
overflow:hidden; 
 
} 
 

 
.wrap .box { 
 
    height: 100vh; 
 
    width: 20%; 
 
    float: left; 
 
    transition:width .25s ease; 
 
} 
 

 
.wrap:hover .box:hover { 
 
    width: 30%; 
 
} 
 
.wrap:hover .box { 
 
    width: 17.5%; 
 
}

<div class="wrap"> 
 
    <div class="box" style="background:red"></div> 
 
    <div class="box" style="background:grey"></div> 
 
    <div class="box" style="background:yellow"></div> 
 
    <div class="box" style="background:green"></div> 
 
    <div class="box" style="background:#000000"></div> 
 
</div>