jQuery调用remove()时忽略delay问题求助：fadeOut后无法延迟移除行

嘿，这个坑我之前踩过！你遇到的问题核心在于jQuery的delay()方法的工作机制——它只对加入了动画队列的操作生效，而remove()是直接修改DOM的同步操作，根本不会进入动画队列，所以它会无视delay()直接执行，导致元素还没完成淡出就被删掉了。

而你换成fadeIn()时delay()能正常工作，是因为fadeIn()本身就是动画方法，会被加入到动画队列中，所以delay()能正确在两个动画之间插入等待时间。

解决方案一：使用fadeOut的完成回调（推荐） #

最直接的方式是把remove()放在fadeOut()的第二个参数（动画完成后的回调函数）里，这样只有当淡出动画彻底结束后，才会执行删除操作：

$(document).ready(function(){
  $('.change').on('click', function(){
    $(this).attr('disabled', 'disabled');
    var row = $(this).closest('.auction-data');
    var price = +row.find('.price').data('price');
    row.find('.input-price').val(price);
    
    // 动画完成后执行remove
    row.fadeOut(2000, function() {
      $(this).remove();
    });
  });
});

解决方案二：用queue()将remove加入动画队列 #

如果你一定要保留delay()的写法，可以通过queue()方法把remove()手动加入到动画队列中，这样delay()就能对它生效了。注意要调用next()来让队列后续的操作继续执行（如果有的话）：

$(document).ready(function(){
  $('.change').on('click', function(){
    $(this).attr('disabled', 'disabled');
    var row = $(this).closest('.auction-data');
    var price = +row.find('.price').data('price');
    row.find('.input-price').val(price);
    
    row.fadeOut(2000).delay(1000).queue(function(next) {
      $(this).remove();
      next(); // 必须调用，否则队列后续操作会被阻塞
    });
  });
});

两种方法都能解决你的问题，不过第一种逻辑更清晰，代码也更简洁，是更常用的做法。

内容的提问来源于stack exchange，提问作者Michał Skrzypek