アニメーションの高さはインラインDIV

Question

のonclickのこれは非常に基本的な質問のように思えるかもしれませんが、div .Thereの高さをアニメーション化しながら、私が捕まってしまった私は、その高さがあるためincrease.Butすべき特定のdivをclick CSS float:left .Whenで複数のdivですその高さは他のdivのポジションも変化しています。私は彼らのポジションを変更したくありません。私が望むのは、target divのすぐ下にある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

うーん、私はあなたが別のものを追加することによってそれを行うことができると思い内部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>

Answer 2

私は正確だと思いますこれはほとんど期待できないことですが、そうであれば達成するのは非常に難しいかもしれません。しかし、jQueryとcssトランジションを使用してflexboxを使用すると、すべての画面サイズで完全に反応するスキームが得られます。

私が見た

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>