淡出所有的div？答案

【问题标题】：Fading out all the divs?淡出所有的div？
【发布时间】：2017-01-30 15:38:15
【问题描述】：

我已经构建了一个函数，它会在每次发送 ajax 请求时显示一个通知，我只需调用 showAjaxAlert() 函数：

function showAjaxAlert(message, type) {
    var rand = randomNumber(100000, 1000000);
    document.getElementById('notification_area').innerHTML = document.getElementById('notification_area').innerHTML + '<div class="ajax-notification ajax-notification-' + type + ' ajax-notification-' + rand + ' alert">' + message + '</div>';
    $('.ajax-notification-' + rand).delay(500).fadeOut('slow');
}

我为每个 div 使用一个随机数来跟踪我淡出的内容，这里是随机数函数：

function randomNumber(min, max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

我将所有 ajax 通知存储在 1 个父 div 中，id 为“notification_area”

<div id="notification_area"></div>

这是我的 CSS：

#notification_area {
    position: fixed;
    top: 2em;
    opacity: 0.8;
    right: 2em;
}

.ajax-notification{
    color: #fff;
    background-color: red;
}

但问题是，如果第一个警报在另一个警报显示之前没有消失，它会永远留在那里，只有最近的警报会消失，就像我必须等待上一个警报消失才能消失一样发送另一个 ajax 警报。为什么会发生这种情况，有什么办法可以解决吗？

【问题讨论】：

你想在显示新通知之前淡出所有通知吗？？
如果我在之前的通知淡出之前启动另一个通知，我只是不希望之前的通知卡住并且不淡出。现在，如果我在第一个淡出之前启动通知（第二个），第二个将淡出，而第一个将卡在那里。

标签： javascript jquery html css ajax

【解决方案1】：

由于您使用的是 jQuery，您可以使用 append() 而不是 innerHTML，因此它只会添加新通知而不触及旧通知，因此延迟会正常工作，请查看下面的示例。

希望这会有所帮助。

function showAjaxAlert(message, type) {
  var rand = randomNumber(100000, 1000000);

  $('#notification_area').append('<div class="ajax-notification ajax-notification-' + type + ' ajax-notification-' + rand + ' alert">' + message + '</div>');

  $('.ajax-notification-' + rand).delay(1000).fadeOut('slow');
}

function randomNumber(min, max){
  return Math.floor(Math.random()*(max-min+1)+min);
}

$('#show').on('click', function(){
  showAjaxAlert('Test Message','Success');
})

#notification_area {
  position: fixed;
  top: 2em;
  opacity: 0.8;
  right: 2em;
}

.ajax-notification{
  color: #fff;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="notification_area"></div>
<button id="show">Show notification</button>

【讨论】：

【解决方案2】：

这里不需要随机数和随机名称。

function showAjaxAlert(message, type) {
  var notificationArea = $('#notification_area'); 
  var notification = $("<div>")
            .addClass("ajax-notification")
            .addClass("ajax-notification-" + type)
            .addClass("alert")
            .html(message);
  notification.appendTo(notificationArea);

  notification.delay(1000).fadeOut('slow');
}

诀窍在于“通知”是此函数的原生对象，因此它会在一秒钟后淡出。

【讨论】：

您可以在同一个 .addClass() 调用中添加多个类，例如....addClass('ajax-notification ajax-notification-type alert')。使用多个调用可以使代码保持干净，但会在更大范围内牺牲性能。

【解决方案3】：

使用 jQuery.append() 并且出于性能原因，我建议您使用 id 而不是类来引用新添加的警报。

看看这个似乎正在做你想做的事情的小提琴......

https://jsfiddle.net/s2zxh5uh/

function showAjaxAlert(message, type) 
{
    var rand = randomNumber(100000, 1000000);
    $('#notification_area').append('<div id="ajax-notification-'+rand+'" class="ajax-notification ajax-notification-' + type + ' alert">' + message + '</div>');
    $('#ajax-notification-' + rand).delay(500).fadeOut('slow');
}  

function randomNumber(min, max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

【讨论】：