Как мне исчезнуть элемент через 5 секунд после его создания?

Question

У меня есть элемент, .toast, созданный функцией, которая печатает EVENT_weather_Sunny.

var EVENT_weather_Sunny = "<div class='toast' onclick='jQuery(this).fadeOut()' onload='jQuery(this).delay(5000).fadeOut()'><div class='toastIcon'><img src='weather_sunny-icon.png'></div><div class='toastLabel'><h1>Weather: Sunny</h1><p>Today's weather forecast predicts sunshine.<p>Click to close.</div></div>";

Как заставить .toast исчезнуть после 5 секунд его существования?

Редактировать: я попробовал следующее предложение, но оно пока не сработало.

function toast(html) {
    $("#toast").prepend(html);
    jQuery(html).delay(5000).fadeOut();
}

Я использую переменную html, так как существует несколько экземпляров .toast, которые нужно создать, с разные имена, такие как EVENT_weather_Sunny, EVENT_incident_Fire.

Answer 1

fadeOut само по себе занимает время в качестве параметра.

$ (селектор) .fadeOut (скорость, ослабление, обратный вызов)

Answer 2

Элемент

div не имеет события onload. просто позвоните jQuery(EVENT_weather_Sunny).delay(5000).fadeOut(), когда добавите его к html

var EVENT_weather_Sunny = "<div class='toast' onclick='jQuery(this).fadeOut()'><div class='toastIcon'><img src='weather_sunny-icon.png'></div><div class='toastLabel'><h1>Weather: Sunny</h1><p>Today's weather forecast predicts sunshine.<p>Click to close.</div></div>";

toast(EVENT_weather_Sunny);

function toast(html) {
    html = jQuery(html);
    $("#toast").prepend(html);
    html.delay(5000).fadeOut();
}

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