javascript - Ajax/JQuery : Slow down other divs below to jump-up when deleted

Question

我的 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'); 
             }//...
        });                
    });

我唯一的div:

    @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>
    }

这可能吗还是真的很难？

Answer 1

使用slideUp()来设置高度动画。要进一步减慢，请将持续时间 1000 更改为 3000 或与您一致的一个。

在你的代码中

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

演示:-

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

  var container = $(this).closest('.box'); 
$(container).slideUp(1000, function() {
  $(this).hide();
    // Animation complete.
  });
    });         
    });

div.box {
    width: 300px;
    border: 1px solid green;
    padding: 25px;
    margin: 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"> 
            <label>test1</label>
            <button class="remove-from-cart" data-id="1">Remove from cart</button>
        </div>
<div class="box"> 
            <label>test2</label>
            <button class="remove-from-cart" data-id="2">Remove from cart</button>
        </div>
<div class="box"> 
            <label>test3</label>
            <button class="remove-from-cart" data-id="3">Remove from cart</button>
        </div>