当嵌套的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();
      });
    });    
});