Исчезающий блок с уведомлениями сверху

Пытаюсь реализовать фиксированный блок уведомлений на всю длину сайта, размещённый в самом вверху и показывающийся на несколько секунд.

Вот код:

function alert(text) {
    t = Date.now();
    $('body').append('<div class="my-alert animate__animated animate__fadeInDown" id="'+t+'">' + text + '</div>');

    setTimeout(function() {
        $('#' + t).addClass('animate__fadeOutUp');
    }, 4000);
}

Однако есть проблема, если вызвать уведомление до скрытия предыдущего, то предыдущий не будет скрыт, хотя на нём визит таймер убирающий блок через 4 секунды. В чём проблема?


Ответы (1 шт):

Автор решения: Igor

Потому что у Вас t - глобальная переменная.

function alert(text) {
    const t = $('<div class="my-alert animate__animated animate__fadeInDown">' + text + '</div>');
    $('body').append(t);

    setTimeout(function() {
        t.addClass('animate__fadeOutUp');
    }, 4000);
}
→ Ссылка