问题描述
我有这个功能:
$('#output').on('click','[data-action="DELETE_ITEM"]',function () {
var itemInfo = $(this.dataset)[0];
var buttonOfProductHTML = document.querySelector(`[data-id='${itemInfo.id}']`);
var buttonOfDeletion = document.querySelector('[data-action="DELETE_ITEM"]');
$(buttonOfDeletion.parentElement.parentElement).fadeOut(1000);
var itemIndex = $('[data-action="DELETE_ITEM"]').index(this);
cart.splice(itemIndex,1);
sessionStorage['shopCart'] = JSON.stringify(cart);
outputCart();
handleCartButton(buttonOfProductHTML,0);
})
仅当我从cart.splice中删除代码(从表格(购物车)中删除一行)时,我才会看到fadeOut效果。我想删除方法比效果要快。我该如何适当地延迟移除购物车物品以查看淡出效果?
谢谢
解决方法
jQuery的fadeOut
方法,接受回调函数作为第二个参数,该参数是可选的。动画结束时执行回调函数。因此,您可以执行fadeOut
并将所有代码放入该回调函数中。 :)
$('#output').on('click','[data-action="DELETE_ITEM"]',function() {
var itemInfo = $(this.dataset)[0];
var that = this;
var buttonOfProductHTML = document.querySelector(`[data-id='${itemInfo.id}']`);
var buttonOfDeletion = document.querySelector('[data-action="DELETE_ITEM"]');
$(buttonOfDeletion.parentElement.parentElement).fadeOut(1000,() => {
var itemIndex = $('[data-action="DELETE_ITEM"]').index(that);
cart.splice(itemIndex,1);
sessionStorage['shopCart'] = JSON.stringify(cart);
outputCart();
handleCartButton(buttonOfProductHTML,0);
});
})