當嵌套的div滑出時，使div容器的高度變小

Question

每當嘗試單擊時div.container內部的div滑出時，我都試圖使div.container的高度變小，但div的高度仍保持相同的高度。

我還希望尚未單擊的div滑入已單擊的div的位置。

這是我的JSFiddle： https ://jsfiddle.net/ispykenny/soysd2zu/任何幫助都將非常有幫助！ 謝謝！ 這是代碼。

<div class="container">

<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>
<div class="two"><p>slide over on click</p></div>
<div class="three"><p>slide over on click</p></div>

.container{
    background-color:green;
}
.two{
    width:300px;
    margin-left:auto;
    margin-right:auto;
    cursor:pointer;
    background:#666;
    text-align:center;
    padding:10px;
    font-size:10px;
    border:1px solid black;
    position:relative;

}
.three{
    width:300px;
    margin-left:auto;
    margin-right:auto;
    cursor:pointer;
    background:#666;
    text-align:center;
    padding:10px;
    font-size:10px;
    border:1px solid black;
    position:relative;


}

$(document).ready(function(){
    $('.two').click(function(){
        $(this).animate({right:"1500px"},'5000');
    });
       $('.three').click(function(){
        $(this).animate({left:"1500px"},'5000');
    });
});  

Answer 1

好像您需要在動畫完成后對單擊的div進行樣式“顯示”以將其設置為“無”。 但是通過這種方式，在那個空曠的領域不會有任何消失的動畫。

$(document).ready(function(){
$('.two').click(function(){
    $(this).animate({right:"1500px"},'5000', function() {
        $(this).css("display", "none")
    });
   $('.three').click(function(){
    $(this).animate({left:"1500px"},'5000', function() {
        $(this).css("display", "none")
    });
});  

Answer 2

使用slideUp平滑移動其余塊。

$(document).ready(function () {
    $('.two').click(function () {
        $(this).animate({
            right: "1500px"
        }, '5000', function() { $(this).slideUp(); });
    });
    $('.three').click(function () {
        $(this).animate({
            left: "1500px"
        }, '5000', function() { $(this).slideUp(); });
    });
});

更新了JSFiddle

Answer 3

https://jsfiddle.net/mblenton/soysd2zu/3/

$(document).ready(function () {
    $( '.two' ).click(function() {
      $( this).animate({
         right: "1500px"
      }, 1000, function() {
        $(this).remove();
      });
    });
    $( '.three' ).click(function() {
      $( this).animate({
         left: "1500px"
      }, 1000, function() {
        $(this).remove();
      });
    });    
});