Как сделать эффект fadeOut с чистым JavaScript

Я пытаюсь сделать эффект затухания на div С чистый JavaScript.

это то, что я сейчас использую:

//Imagine I want to fadeOut an element with id = "target"
function fadeOutEffect()
{
 var fadeTarget = document.getElementById("target");
 var fadeEffect = setInterval(function() {
  if (fadeTarget.style.opacity < 0.1)
  {
   clearInterval(fadeEffect);
  }
  else
  {
   fadeTarget.style.opacity -= 0.1;
  }
 }, 200);
}

div должен исчезнуть плавно, но он немедленно исчезнет.

Что случилось? Как я могу ее решить?

jsbin

12
fadeout javascript

3 ответов

первоначально, когда нет набора непрозрачности, значение будет пустой строкой, что приведет к сбою вашей арифметики. Вы можете установить по умолчанию 1, и он будет работать.

function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        } else {
            clearInterval(fadeEffect);
        }
    }, 200);
}

document.getElementById("target").addEventListener('click', fadeOutEffect);
#target {
    height: 100px;
    background-color: red;
}
<div id="target">Click to fade</div>

пустая строка кажется, что она рассматривается как 0 JavaScript при выполнении арифметики и сравнения (хотя в CSS она рассматривает эту пустую строку как полную непрозрачность)

> '' < 0.1
> true

> '' > 0.1
> false


> '' - 0.1
> -0.1
23

только сегодня утром я нашел этот фрагмент кода в http://vanilla-js.com, это очень просто, компактно и быстро:

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

вы можете изменить скорость затухания, изменив второй параметр в

10

вы можете использовать свойство перехода CSS, а не делать таймер vai в javascript. это больше ориентировано на производительность по сравнению с тем, что вы делаете.

Регистрация

http://fvsch.com/code/transition-fade/test5.html#test3

3