fagol fagol - 10 days ago 5
Ajax Question

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

My divs are listed from top to bottom. When one selected div is removed/faded, all other divs below jumps up and and cover the gap. This is working as intended, but I would like to slow down the jumps-up to make it looks better.

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

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

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


My only divs:

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


Is this possible or is it really difficult?

Answer

Use slideUp() to animate the height. to slow down further change the duration 1000 to 3000 or one u are consistent with.

In your code

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

Demo:-

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