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>

Ajax / JQuery：在删除时减慢下面的其他div以跳转

1 个答案: