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

Question

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

所以我的吐司滑下来，在那里停留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);

所以我想要的是让吐司淡入，在那里停留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();
    });

<强> 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 2

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>

Answer 3

我建议您使用这种轻巧简单的ToastMaker库，其大小仅为 1KB 。

$('#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>

访问this page，以查看带有精美风格的吐司消息的更多示例