0

Пробую реализовать исчезновение след. образом, но opacity сразу становится равным 0

window.onload = function() {
        const loader = document.getElementById('page-preloader');
        setInterval(() => loader.style.opacity -= 0.01, 1000);
        if (loader.style.opacity==0) clearInterval();
};

3 ответа 3

1

У вас изначально св-во opacity не задано, соответственно при приведении к числу оно становится равным 0 сразу.

Нужно либо задать свойство opacity изначально:

const loader = document.getElementById('page-preloader');
const interval = setInterval(() => {
  loader.style.opacity -= 0.01;
  if (loader.style.opacity==0) clearInterval(interval);
}, 10);
#page-preloader{
  width: 50px;
  height: 50px;
  background: black;
}
<div style="opacity: 1" id="page-preloader"></div>

Либо вводить дополнительную переменную:

const loader = document.getElementById('page-preloader');
let opas = 1;
const interval = setInterval(() => {
  opas -= 0.01;
  loader.style.opacity = opas;
  if (opas == 0) clearInterval(interval);
}, 10);
#page-preloader{
  width: 50px;
  height: 50px;
  background: black;
}
<div id="page-preloader"></div>

1
  • Спасибо большое:) добавил стили в тег и все заработало:)
    – corocoto
    31 янв 2019 в 12:45
1

Попробуйте так:

var loader = document.getElementById("loader");
var timer = setInterval(function() {
	loader.style.opacity -= 0.01;
	if (loader.style.opacity == 0)
		clearInterval(timer);
}, 100);
#loader {
  width: 200px;
  height: 200px;
  background-color: black;
}
<div id="loader" style="opacity:1;"></div>

2
  • Немного по другому сделал, но все равно спасибо:)
    – corocoto
    31 янв 2019 в 12:47
  • 1
    window.onload = function() { const loader = document.getElementById('page-preloader'); setInterval(() => { if(loader.style.opacity==0)clearInterval(); else loader.style.opacity -= 0.05; }, 30); };
    – corocoto
    31 янв 2019 в 12:47
1

Как вариант сделать на css.

$(function() {
  const loader = document.getElementById('page-preloader');
  loader.classList.add('hide-loader');
});
#page-preloader {
  width: 50px;
  height: 50px;
  background: black;
  opacity: 1;
  transition: opacity 1s ease;
}

#page-preloader.hide-loader {
  opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="page-preloader"></div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.