內聯div的onclick動畫高度

Question

這似乎是一個非常基本的問題，但是我在設置div高度的動畫時陷入困境。有多個div帶有css float:left 。當我click特定的div時，其高度應該增加。但是由於其高度正在增加div的位置也在變化。我不希望他們更改其位置。我想要的是位於target div下方的div應該向下移動而不影響其他div的位置。

小提琴

這是代碼。

 $("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示例

 $(".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> 

Answer 2

嗯，我想您可以通過在其中添加另一個div並擴展該div的大小來做到這一點：

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

 div { height: 100px; width: 100px; } .outter-div{ float: left; margin: 10px; overflow: visible; } .inner-div{ border: 2px solid; } 

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