我的 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>
}
这可能吗还是真的很难?
最佳答案
使用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>
关于javascript - Ajax/JQuery : Slow down other divs below to jump-up when deleted,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40880285/