Javascript Ajax/JQuery：当删除时，减慢下面的其他div的速度以跳起

我的div是从上到下列出的。当一个选定的div被删除/褪色时，下面的所有其他div都会跳起来并覆盖间隙。这是工作的预期，但我想放慢跳跃，使它看起来更好

  $('.remove-from-cart').click(function () {

  var container = $(this).closest('.box'); 

        $.post("/Cart/RemoveFromCart", { "id": $(this).data('id') }, function (data) {
            if (data) {
                   container.fadeOut('slow'); 
             }//...
        });                
    });

我唯一的分区：

    @foreach (var item in Model)
    {
        <div class="box"> 
            <label>@item.Name</label>
            ....
            <button class="remove-to-cart" data-id="@item.Id">Remove from cart</button>
        </div>
    }

@foreach（模型中的变量项）
{
@项目名称
....
从购物车上取下
}

这是可能的还是真的很难

使用

slideUp（）

设置高度动画。要进一步降低速度，请将持续时间

1000

更改为

3000

或一个u与一致

在代码中

$('.remove-from-cart').click(function () {

var container = $(this).closest('.box'); 

    $.post("/Cart/RemoveFromCart", { "id": $(this).data('id') }, function (data) {
        if (data) {
            $(container).slideUp(1000, function() {
            $(this).hide();
            // Animation complete.
            });       
             //  container.fadeOut('slow'); 
         }//...
    });                
});

演示：-

$（文档）.ready（函数（）{
$（'.remove from cart'）。单击（函数（）{
var container=$（this）.closest（'.box'）；
$（容器）.slideUp（1000，函数（）{
$（this.hide（）；
//动画完成。
});
});         
});
div.box{
宽度：300px；
边框：1px纯绿色；
填充：25px；
利润率：25px；
}

测试1
从购物车上取下
测试2
从购物车上取下
测试3
从购物车上取下