Ajax/JQuery：下にある他のdivをスローダウンして、ジャンプするとジャンプします。

Question

My divは上から下にリストされています。選択された1つの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にするか、または1つの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'); 
     }//... 
    });     
}); 

デモ： -

$(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>