動畫高度onclick內嵌div

這可能看起來像一個非常基本的問題，但我被卡住時動畫的高度div。有多個div與css float:left。當我click特殊div的高度應該增加。但既然它的高度在增加，其他div的位置也在變化。我不希望它們改變它們的位置。我想要的是，div下方的div應該向下移動而不會影響其他div。動畫高度onclick內嵌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>

來源

2017-02-22 shubham agrawal

我看見了，會隨着你使用花車告訴，在HTML組內容更好地列inyto一個格一列 –

嗯，我想你可以通過內部添加另一個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>

來源

2017-02-22 13:35:22 AVAVT

感謝您的答覆但問題是當高度增加時divs重疊。我希望目標div下面的div下移不要重疊。 –

我明白了，所以我建議你使用http://masonry.desandro.com/作爲pinterest般的佈局。 – AVAVT

我試圖避免任何插件。我只是在尋找一個更好的CSS來解決這個問題。 –

我認爲這正是這你所期望的幾乎是不可能的，但如果是這樣，它可能很難實現。但是如果您使用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>

來源

2017-02-22 13:43:06

這幾乎是相似的，但問題是所有下面的divs不僅移動目標div下面的div。 –

@shubhamagrawal我知道我的朋友，但正如我上面所說，這將是非常難以實現的，因爲腳本將不得不檢查哪些div完全在他身下，並且它打賭它將是靜態方法而不可能與全面負責任的網頁設計儘量縮小窗口到最大，它仍然可以正常工作。 –

感謝您的回覆，現在我甚至已經意識到這不是那麼容易實現，但問題在於它是項目需求，我必須按照給我的指示去做。我還在尋找任何替代方案做這個。 –

動畫高度onclick內嵌div

回答

相關問題