Ajax/JQuery：刪除下面的其他div以刪除跳轉

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>