Javascript 当嵌套的div滑出时，使div容器的高度变小

每当div.container中的div在单击时滑出时，我试图使height div.container变小，但div的高度仍然保持不变

我还希望尚未单击的div滑入已单击的div的位置

以下是我的JSFIDLE： 任何帮助都会很有帮助！谢谢 这是代码

<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');
    });
});  

按一下滑过

按一下滑过

按一下滑过

按一下滑过

按一下滑过

按一下滑过

按一下滑过

按一下滑过

按一下滑过

按一下滑过

.集装箱{
背景颜色：绿色；
}
.二{
宽度：300px；
左边距：自动；
右边距：自动；
光标：指针；
背景:#666；
文本对齐：居中；
填充：10px；
字体大小：10px；
边框：1px纯黑；
位置：相对位置；
}
.三{
宽度：300px；
左边距：自动；
右边距：自动；
光标：指针；
背景:#666；
文本对齐：居中；
填充：10px；
字体大小：10px；
边框：1px纯黑；
位置：相对位置；
}
$（文档）.ready（函数（）{
$（'.two'）。单击（函数（）{
动画（{右：“1500px”}，'5000'）；
});
$（'.three'）。单击（函数（）{
动画（{左：“1500px”}，'5000'）；
});
});  

似乎需要在动画完成后对单击的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")
    });
});  

---

使用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(); });
    });
});

---

你的意思是基本上你想让所有的东西都随着盒子的移除而“向上滑动”吗？是的，这就是我想说的，汉克斯！这太完美了！

$(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();
      });
    });    
});