Как сделать плавное появление блока с задеркой?

Question

[RushV]

Всех приветствую!
Так всё работает не могу сделать плавность и задержку появления блока.
Сейчас просто резко появляется надпись и всё.

$(document).on('af_complete', function (event, response) {
       if(event,response){
        $('body').append("<div class='toast success-message p-3 text-white bg-success border-0' role='alert'><div    class='toast-body'>Ваше сообщение отправлено</div></div>");
        setTimeout(
            $('.success-message').css({
            "opacity":"1",
            "transition":"2s"
            }), 4000);
            response.message='';
       }
    });

Может конечно сделать всё по документации . Я что то не разобрался.
У меня какой то костыль получился.
Прошу не ругать я учусь ещё чайник так скажем.
Заранее благодарю!

Answer 1

[Сергей Соколов]

в setTimeout() первым параметром надо передавать функцию, которая выполнится только там когда-то.

setTimeout(
            () => $('.success-message').css({

Comments

[RushV]

А это запись чем отличается от моей?

[Сергей Соколов]

RushV, в вашем варианте сразу выполняется функция и в setTimeout() попадает результат её выполнения.

[RushV]

Сергей Соколов, Понял спасибо!