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进行“显示”以设置'none'。但通过这种方式，在那片空地上不会有任何消失的动画。

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

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

当嵌套div滑出

3 个答案: