Javascript - 让一个 div 淡入，停留一段时间，淡出然后删除它

Question

我想尝试一些 toast 通知。我动态创建它们。当我有这个 toast 时，我给它一个数字作为 id 并增加一个计数器。

所以我的 toast 滑了下来，在那里停留了 3 秒，然后被摧毁了

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

所以我想要的是让 toast 淡入，停留 X 秒，淡出并自行销毁。

重要的是，当我创建第二个 div 时，它必须将自己置于我之前创建的 div 之下。多个 toast 消息很重要。

如果您需要查看我的完整代码，就是这样:

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

帮助会很棒 :)

Answer 1

可以使用jQuery的delay函数和fadeOut函数的回调来实现:

$("#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();
    });

示例:

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>