Question

我正在尝试制作一些代码来删除网页上卡片中显示的项目。

当用户点击remove-item-btn时，会调用ajax删除后端中的项目。在前端，项目的显示更改为无，因此它会消失。所有这一切都运作良好。在一瞬间，物品从网格中消失，后面的物品已经填满了它的位置。

问题：是否可以编写导致其他卡片优雅移动以填充空白区域的JavaScript？

我在铁轨上使用bootstrap，sass，ruby和htmlslim。

这些卡目前处于一个网格中，根据屏幕尺寸的不同，宽度会有所不同，网格的平均宽度为3张卡片。

HTML

<div class="item-card" id="2">...</div>
<div class="item-card" id="3">...</div>
<div class="item-card" id="4">...</div>
<div class="item-card" id="5">...</div>
<div class="item-card" id="6">...</div>
<div class="item-card" id="7">...</div>

JS

$('.remove-item-btn').mousedown(function(ev) {
  var item_card = document.getElementById(...);
  item_card.style.display = 'none'
  $.ajax(this removes the item)
});

CSS

.item-card {
  ...
  display: inline-block;
  ...
}

Answer 1

您可以使用动画方法隐藏jQuery，而不仅仅使显示等于none。像这样：

$("#ID_OF_ELEMENT").hide("slow");

更多内容在这里：http://api.jquery.com/hide/

更多一般动画内容在这里：http://api.jquery.com/animate/

设置style.display = none

1 个答案: