Плавное проявление div через js и opacity?

Question

[Виталий Рыбченко]

Всем доброго дня!
Помогите, пожалуйста, разобраться:
1. Почему он тут не работает? (локально хотя бы запускается)
2. По идее скрипт должен плавно менять opacity у popupPicture тем самым плавно проявляя его. Аналогично при выходе - делая прозрачным.
jsfiddle.net

Comments

[Виталий Рыбченко]

Новая ссылка, где скрипт работает. Почему не отрабатывает цикл?
https://jsfiddle.net/6k4nbkrt/2/

Answer 1

[Николай]

Несколько замечаний:
1. onclick в html требует, чтобы функция была в глобальной (window) области видимости, jsFiddle оборачивает весь код что вы пишите в window.onload = function() {}, так что ничего не выходит. Повесьте событие через js или напишите window.popupPictureOpen = popupPictureOpen;.
2. Тип el.style.opacity - строка, строка + число = конкатенация двух строк, нужно привести opacity к числу при помощи parseFloat.
пофикшенный вариант(только функция появления)
P.S. setInterval для такого уже никто не использует. Используются либо css-transitions либо requestAnimationFrame.

Comments

[Виталий Рыбченко]

Не приведете пример requestAnimationFrame анимации с opacity? Смотрю как это работает и что то не доходит до меня, почему у меня ошибка лезет, и почему не останавливается. https://jsfiddle.net/6k4nbkrt/5/
А css-transitions не подходит - если display не менять на none, то div перекрывает функционал, а при изменении display transitions не работает.

Answer 2

[SagePtr]

Потому что в настройках подключаемого яваскрипта на jsfiddle указано Load type = onLoad, а значит, этот яваскрипт будет завёрнут в функцию onload (и функции, объявленные там, будут локальны, а не глобальны)

Comments

[Виталий Рыбченко]

Спасибо, добрый человек! Поправил.