淡出所有div？

Question

I have built a function that will display a notification each time an ajax request is send and I just call the showAjaxAlert() function :

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');
}

I use a random number for each div to keep track of what im fading out, here is the random number function:

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

I store all my ajax notifications in 1 parent div with the id of "notification_area"

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

Here is my CSS:

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

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

But the issue is, if the first one hasn't faded before another alert shows, it stays there forever and only the most recent alert fades out and its like I have to wait for the previous alert to fade out before I can send another ajax alert. Why is this happening, and is there any way to fix it?

Answer 1

Since you're using jQuery you could use append() instead of innerHTML so it will just add the new notification without touching the old ones so the delay will work fine, check the example below.

Hope this helps.

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>

</div>