jquery - 如果该元素正在动画（）ed，jQuery是否会取消该元素上的remove（）？

Question

我这里有这段代码，它应该淡出/胺化到 0 宽度，然后 remove() 一些元素。但由于某种原因， remove() 不起作用。

$('#submitUsage').click(function(){
  var bahoooga = $('#inputUsage').val().replace(/\D/g,'');
  var bahoooga = bahoooga + " KWh";
  $(this).parent().parent().children('td:nth-child(2)').html(bahoooga);
  $('#editData td:last-child, #editData th:last-child').animate({
    width: '40px'
  }, 1500);
  $('#inputUsage').animate({
    width: '0px',
    opacity: '0'
  }, 1000);
  $('#cancelUsage, #submitUsage').fadeOut(1000);
  $('#inputUsage, #cancelUsage, #submitUsage').remove();
});

我在 setTimeout() 函数中有 remove()，这是我想要的，但这也不起作用。

Answer 1

尝试像这样链接那些：

$('#inputUsage').animate({
    width: '0px',
    opacity: '0'
}, 1000).promise().done(function(){
  $('#cancelUsage, #submitUsage').fadeOut(1000, function(){
     $('#inputUsage, #cancelUsage, #submitUsage').remove();
  });
});

Answer 2

动画完成后，您应该只删除元素。您不能全部完成并假设它们完全同时完成（即使它们都在 1000 毫秒）。

target.fadeOut(300, function(){ $(this).remove();});

对你来说，它看起来像：

$('#inputUsage').animate({
  width: '0px',
  opacity: '0'
  }, 1000).promise().done(function() { $(this).remove(); });

$('#cancelUsage, #submitUsage').fadeOut(1000, function() { $(this).remove(); });