fadeIn и fadeOut

[zulyamodx]

Здравствуйте.
Есть js скрипт, который выводить всплывающие уведомления. Но текст появляется и исчезает резко. Хотелось бы чтобы текст плавно появлялся и исчезал. Вот и сам код:

<script>

window.addEventListener("DOMContentLoaded", function() {
    function d() {
        b = a[c];
        c = ++c % g;
        b.classList.add("show");
        e = window.setTimeout(f, 5E3)
    }

    function f() {
        window.clearTimeout(e);
        b.classList.remove("show");
        window.setTimeout(d, 5E3)
    }
    var a = document.querySelectorAll(".parent_popup"),
        e, b, a = [].slice.call(a, 0),
        c = 0,
        g = a.length;
    a.forEach(function(a) {
        a.querySelector(".close").addEventListener("click", function(a) {
            a.preventDefault();
            f()
        })
    });
    window.setTimeout(d, 5E3)
});
</script>

Вы можете изменить код таким образом, что текст появлялся и исчезал плавно?
Я меняла show и close на fadeIn и fadeOut, но скрипт перестал работать. Заранее спасибо.

[Alex_63]

zulyamodx,
Можно сделать плавное скрытие на css:

.parent_popup{
  opacity:0;
  visibility:hidden;
  transition:.5s ease;
  display:block;
}
.parent_popup.show {
  opacity:1;
  visibility:visible;
}

[zulyamodx]

Alex_63,
Спасибо, что ответили. Но у меня почти не изменилось резкое появление и исчезновение. А хотелось бы чтобы чтобы плавно, а не сразу исчезал и появлялся.

[Alex_63]

zulyamodx,
Пробуйте увеличивать значение transition
И да, - для .parent_popup не должно быть прописано display:none (Иначе скроется сразу и эффекта упрозрачнивания не будет

Ну или дайте полный код, который тестируете (с HTML и CSS)

[Alex_63]

Да.. - Если jQuery подключен, тогда можно сделать так:

window.addEventListener("DOMContentLoaded", function() {
    function d() {
        b = a[c];
        c = ++c % g;
        $(b).addClass("show").fadeIn(600);
        e = window.setTimeout(f, 5E3)
    }

    function f() {
        window.clearTimeout(e);
        $(b).removeClass("show").fadeOut(600);
        window.setTimeout(d, 5E3)
    }
    var a = document.querySelectorAll(".parent_popup"),
        e, b, a = [].slice.call(a, 0),
        c = 0,
        g = a.length;
    a.forEach(function(a) {
        a.querySelector(".close").addEventListener("click", function(a) {
            a.preventDefault();
            f()
        })
    });
    window.setTimeout(d, 5E3)
});

[zulyamodx]

Alex_63,
Спасибо большое за помощь! Сейчас попробую так сделать.

[zulyamodx]

У меня сейчас текст плавно появляется, но резко исчезает.
Пробовала также увеличивать значение transition. Но исчезает резко.
Может нужно было только js код менять на ваш или вместе с css?

[Dilettante_Pro]

zulyamodx,
В коде пост 5 строках 5 и 11 не нужно add и remove - достаточно fadeIn и fadeOut

[zulyamodx]

Dilettante_Pro,
Здравствуйте.
То есть, вот так нужно?:

window.addEventListener("DOMContentLoaded", function() {
    function d() {
        b = a[c];
        c = ++c % g;
        $(b).fadeIn(600);
        e = window.setTimeout(f, 5E3)
    }
 
    function f() {
        window.clearTimeout(e);
        $(b).fadeOut(600);
        window.setTimeout(d, 5E3)
    }
    var a = document.querySelectorAll(".parent_popup"),
        e, b, a = [].slice.call(a, 0),
        c = 0,
        g = a.length;
    a.forEach(function(a) {
        a.querySelector(".close").addEventListener("click", function(a) {
            a.preventDefault();
            f()
        })
    });
    window.setTimeout(d, 5E3)
});

Спасибо!