Question

我有一个名为show_alert的js函数。

function show_alert(type='info', $message) {

$('.notifications-area').append(' \
    <div class="notification opened ' + type + '"> \
        <h5>' + $message + '</h5> \
    </div> \
');

setTimeout(function(){
    $('.notification').addClass('closed');
  }, 4000);
}

打开的和关闭的 css类包含一些关键帧，打开的关键帧使它出现，而关闭的关键帧则消失。我想在关闭动画发生后也删除html。

Answer 1

未经测试，但类似的方法应该起作用：

function show_alert(type='info', $message) {
  var notification = $('<your notification element html here/>');

  $('.notifications-area').append(notification);

  setTimeout(function(){
    notification.addClass('closed');
  }, 4000);

  setTimeout(function(){
    notification.remove();
  }, 8000);
}

通过首先为通知创建元素并将其分配给变量，您便可以对其进行引用，以便以后使用-无需任何ID或必须使用的所有方法来“查找” DOM中的元素。

Answer 2

您可以使用jQuery remove api。

您可以执行以下操作。

function show_alert(type='info', $message) {
  var randomId = getRandomId ();

  $('.notifications-area').append(' \
    <div id="' + randomId + '" class="notification opened ' + type + '"> \
        <h5>' + $message + '</h5> \
    </div> \
  ');

setTimeout(function(){
    $('#' + randomId).addClass('closed');
    // you still have the randomId,
    $('#' + randomId).remove();
  }, 4000);
}}

Answer 3

$('.notification').addClass('closed');

var duration = {YOUR CSS TRANSITION DURATION};

setTimeout(function(){
  $('.notification').remove();
}, duration);

因此，在动画jquery之后，将从html中删除您的DOM。

JavaScript附加通知，动画和删除

3 个答案: