Javascript - make a div fade in, stay there for a time, fade out and remove it then

Question

I want to try some toast notifications. I create them dynamically. When I have this toast I give it a number as the id and increase a counter.

So my toast slides down, stays there for 3 sec and gets destroyed

var thisToast = this.toastCounter - 1; // get the number of the toast id
    $(document).find("#toast_" + thisToast).slideDown(500); // slide down
    setTimeout(function() {
      $(document).find("#toast_" + thisToast).remove(); // destroy after a time
    }, 3000);

So what I want is to make the toast fade in, stay there for X seconds, fade out and destroy itself.

It is important, that when I create a second div, it has to place itself under the div i created before. Multiple toast messages are important.

If you need to see my full code, that's it:

CreateToast(isValid) { // valid Message or Error Message ?
    var toastMessage;
    var foreColor;
    var backgroundColorIconDiv
    var backgroundColorContentDiv;
    var borderColor;

    if (!isValid) {
      toastMessage = "Failure";
      foreColor = "#ff0000";
      backgroundColorIconDiv = "#ff8080";
      backgroundColorContentDiv = "#ff471a";
      borderColor = "#800000";
    } else {
      toastMessage = "Success";
      foreColor = "#2fb62f";
      backgroundColorIconDiv = "#71da71";
      backgroundColorContentDiv = "#00e673";
      borderColor = "#00802b";
    }

    this.CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv); // Create the complete toast

    this.toastCounter++; // Increase the counter for the toast id

    var thisToast = this.toastCounter - 1;
    $(document).find("#toast_" + thisToast).slideDown(500);
    setTimeout(function() {
      $(document).find("#toast_" + thisToast).remove();
    }, 3000);
  }

  CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv) { // Create the toast container for the icon and the text
    var wrapperDiv = document.createElement("div");
    wrapperDiv.id = "toast_" + this.toastCounter;
    wrapperDiv.style.display = "none";
    wrapperDiv.style.margin = "0 auto";
    wrapperDiv.style.width = "200px";
    wrapperDiv.style.height = "50px";
    wrapperDiv.style.border = "2px solid " + borderColor;
    wrapperDiv.style.borderRadius = "10px";
    document.body.appendChild(wrapperDiv);

    this.CreateIconDiv(wrapperDiv, backgroundColorIconDiv);
    this.CreateContentDiv(wrapperDiv, toastMessage, foreColor, backgroundColorContentDiv);
  }

  CreateIconDiv(parentDiv, backgroundColor) { // Create the div for the icon of the toast
    var iconDiv = document.createElement("div");
    iconDiv.style.textAlign = "center";
    iconDiv.style.width = "20%";
    iconDiv.style.cssFloat = "left";
    iconDiv.style.backgroundColor = backgroundColor;
    parentDiv.appendChild(iconDiv);
  }

  CreateContentDiv(parentDiv, toastMessage, foreColor, backgroundColor) { // Create the div for the text of the toast
    var contentDiv = document.createElement("div");
    contentDiv.style.textAlign = "center";
    contentDiv.style.width = "80%";
    contentDiv.style.cssFloat = "right";
    contentDiv.style.color = foreColor;
    contentDiv.style.backgroundColor = backgroundColor;
    contentDiv.style.fontWeight = "bold";
    contentDiv.style.fontSize = "20px";
    contentDiv.innerHTML = toastMessage;
    parentDiv.appendChild(contentDiv);
  }

Help would be awesome :)

Answer 1

I suggest you use this light and simple ToastMaker library which is only 1KB in size.

$('#mybutton').click(()=>{ToastMaker("This is a toast notification!")});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://unpkg.com/toastmaker/dist/toastmaker.min.css">

<script type="text/javascript" src="https://unpkg.com/toastmaker/dist/toastmaker.min.js"></script>


<button id="mybutton">Show Toast</button>

Visit this page to check more examples with beautiful styled toast messages

Answer 2

You can use the delay function of jQuery and the callback of the function fadeOut to acheive what you want:

$("#toast_" + thisToast)
    .fadeIn(500)                  // fade in (500 ms)
    .delay(3000)                  // delay of 3 s
    .fadeOut(500, function() {    // fade out (500 ms), when it's done, remove the element
        $(this).remove();
    });

Examlpe:

function start() {
  $("#div").fadeIn(500)
    .delay(3000)
    .fadeOut(500, function() {
      $(this).remove();
    });
}

#div {
  background-color: red;
  width: 100px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="start();">Start</button>
<div id="div" style="display:none;"></div>

Answer 3

setTimeout(function() {
  $('.test').fadeIn();
  
  setTimeout(function() {
    $('.test').fadeOut().remove();
  }, 3000);
}, 1000);

.test {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">fade in, stay a while, fade out, remove</div>