Question

我正在尝试显示通知，消失，然后在完成后将其从DOM中删除。

我尝试了以下内容：

var minibasketAlert = function (uid, desc) {
  $('.minibasket-alerts').append($('<div class="minibasket-alert" id="'+uid+'-alert"><p>Adding '+desc+' to basket</p></div>'));
  $('#' + uid + '-alert').fadeIn('fast').delay(2000).fadeOut('slow', function() {
    $('#' + uid + '-alert').remove();
  });
};

这会将项目添加到DOM并淡化它，但是当它完成时它不会从DOM中删除

我也尝试过：

var minibasketAlert = function (uid, desc) {
  $('.minibasket-alerts').append($('<div class="minibasket-alert" id="'+uid+'-alert"><p>Adding '+desc+' to basket</p></div>'));
  $('#' + uid + '-alert').fadeIn('fast').delay(2000).fadeOut('slow', function() {
    $(this).remove();
  });
};

在发生任何动画效果之前，这将从DOM中删除新添加的元素。当我运行该函数但在视口中没有显示任何内容时，我可以看到父元素在检查器中闪烁

Answer 1

var minibasketAlert = function (uid, desc) {
    $('.minibasket-alerts').append($('<div class="minibasket-alert" id="'+uid+'-alert"><p>Adding '+desc+' to basket</p></div>'));
    $('#' + uid + '-alert').fadeIn('fast').delay(2000).fadeOut('slow', function() {
        $('#' + uid + '-alert').remove();
    });
};

是两个

的正确选项

动画后删除动态创建的内容

1 个答案: