javascript - 内联div的动画高度onclick

Question

这似乎是一个非常基本的问题，但我在为 div 的高度设置动画时卡住了。有多个带有 css float:left 的 div。当我 click 特定的 div 它的高度应该增加。但由于它的高度在增加，所有其他 div 的位置也在改变。我不希望他们改变他们的位置。我想要的是 target div 应该向下移动而不影响其他 div。

Fiddle

这是代码。

$("div").click(function() {
  if ($(this).height() != 100)
    $(this).animate({
      height: 100
    }, 1000);
  else
    $(this).animate({
      height: 150
    }, 1000);
});

div {
  height: 100px;
  width: 100px;
  border: 2px solid;
  float: left;
  margin: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  HELLO WORLD 1
</div>
<div>
  HELLO WORLD 2
</div>
<div>
  HELLO WORLD 3
</div>
<div>
  HELLO WORLD 4
</div>
<div>
  HELLO WORLD 5
</div>
<div>
  HELLO WORLD 6
</div>
<div>
  HELLO WORLD 7
</div>
<div>
  HELLO WORLD 8
</div>
<div>
  HELLO WORLD 9
</div>
<div>
  HELLO WORLD 10
</div>

Answer 1

我认为这正是您所期望的几乎不可能，但如果是，则可能很难实现。但是，如果您将 flexbox 与一些 jQuery 和 css 转换一起使用，您将在每个屏幕尺寸上获得完全响应的方案。

Jsfiddle example

$(".container").find('div').click(function() {
  $(this).toggleClass('show');
});

.container div {
  height: 100px;
  width: 100px;
  border: 2px solid;
  margin: 10px;
  transition: .5s ease height;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.show {
  height: 150px !important;
  transition: .5s ease height;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div>
    HELLO WORLD 1
  </div>
  <div>
    HELLO WORLD 2
  </div>
  <div>
    HELLO WORLD 3
  </div>
  <div>
    HELLO WORLD 4
  </div>
  <div>
    HELLO WORLD 5
  </div>
  <div>
    HELLO WORLD 6
  </div>
  <div>
    HELLO WORLD 7
  </div>
  <div>
    HELLO WORLD 8
  </div>
  <div>
    HELLO WORLD 9
  </div>
  <div>
    HELLO WORLD 10
  </div>
</div>