如何延迟淡出功能？

编程问答 2022-06-09

问题描述

我有这个功能：

    $('#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);
  });
})
fadeoutfunctionfunctionjquerymethods