如何在創建后 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

div元素沒有onload事件。 只需在將其添加到 html 時調用jQuery(EVENT_weather_Sunny).delay(5000).fadeOut()

 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>

Answer 2

淡出本身需要時間作為參數。

$(selector).fadeOut(speed,easing,callback)