jquery - 在 100% 宽度的容器内动画 div

Question

我被这个问题困住了。我有 5 列 div 并排 float 。悬停在其上时，悬停的 div 应通过动画扩展其宽度。到目前为止我已经介绍了那部分，但我的问题是当我悬停那个 div 时，最后一个 div 出现在底部(意味着它超过 100% 宽度的容器)我不确定如何在不防止超过 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>

一个很好的 flex 指南 here .

JSFiddle 上的相同代码.