Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.11.2016, 18:53
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

fadeIn и fadeOut
Здравствуйте.
Есть 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, но скрипт перестал работать. Заранее спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 19.11.2016, 19:05
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

zulyamodx,
Можно сделать плавное скрытие на css:
.parent_popup{
  opacity:0;
  visibility:hidden;
  transition:.5s ease;
  display:block;
}
.parent_popup.show {
  opacity:1;
  visibility:visible;
}

Последний раз редактировалось Alex_63, 19.11.2016 в 19:11.
Ответить с цитированием
  #3 (permalink)  
Старый 19.11.2016, 19:22
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Alex_63,
Спасибо, что ответили. Но у меня почти не изменилось резкое появление и исчезновение. А хотелось бы чтобы чтобы плавно, а не сразу исчезал и появлялся.
Ответить с цитированием
  #4 (permalink)  
Старый 19.11.2016, 20:00
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

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

Ну или дайте полный код, который тестируете (с HTML и CSS)
Ответить с цитированием
  #5 (permalink)  
Старый 19.11.2016, 20:21
Аспирант
Отправить личное сообщение для Alex_63 Посмотреть профиль Найти все сообщения от Alex_63
 
Регистрация: 22.08.2015
Сообщений: 71

Да.. - Если 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)
});
Ответить с цитированием
  #6 (permalink)  
Старый 19.11.2016, 20:40
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Alex_63,
Спасибо большое за помощь! Сейчас попробую так сделать.
Ответить с цитированием
  #7 (permalink)  
Старый 19.11.2016, 21:00
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

У меня сейчас текст плавно появляется, но резко исчезает.
Пробовала также увеличивать значение transition. Но исчезает резко.
Может нужно было только js код менять на ваш или вместе с css?
Ответить с цитированием
  #8 (permalink)  
Старый 21.11.2016, 10:34
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

zulyamodx,
В коде пост 5 строках 5 и 11 не нужно add и remove - достаточно fadeIn и fadeOut
Ответить с цитированием
  #9 (permalink)  
Старый 21.11.2016, 17:26
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

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)
});

Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
FadeIn / FadeOut Agapkin jQuery 9 02.06.2016 02:15
Не работает fadeOut fadeIn fadeTo Сершей jQuery 8 07.07.2013 21:50
fadeOut и fadeIn Tums37 jQuery 15 22.07.2012 10:58
fadein fadeout DIV Gennadiy jQuery 0 25.05.2012 10:57
JQUERY fadeIn и fadeOut ПРОБЛЕМА RomanVasin Элементы интерфейса 6 30.05.2010 11:19