fadetoggle - Cómo hacer efecto fadeOut con JavaScript puro

remove fadeout jquery

Question

Estoy tratando de hacer efecto fadeOut para un div con JavaScript puro .

Esto es lo que estoy usando actualmente:

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

El div debería desvanecerse suavemente, pero desaparecerá inmediatamente.

Que pasa ¿Cómo puedo resolverlo?

jsbin

Answer 1

Esta misma mañana, encontré este código en http://vanilla-js.com , es muy simple, compacto y rápido:

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

Puede cambiar la velocidad del fundido cambiando el segundo parámetro en la función setTimeOut .

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

#thing {
  background: red;
  line-height: 40px;
}

<div id="thing">I will fade...</div>

Answer 2

Inicialmente, cuando no hay un conjunto de opacidad, el valor será una cadena vacía, lo que hará que su aritmética falle. Puedes ponerlo por defecto en 1 y funcionará.

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>

Una cadena vacía parece que es tratada como un 0 por JavaScript al realizar operaciones aritméticas y comparativas (aunque en CSS trata esa cadena vacía como una opacidad total)

> '''' < 0.1
> true

> '''' > 0.1
> false


> '''' - 0.1
> -0.1

Answer 3

puede usar la propiedad de transición CSS en lugar de hacer vai timer en javascript. eso es más orientado al rendimiento en comparación con lo que estás haciendo.

comprobar

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

Answer 4

    var op = 1;
    var element = document.getElementById(''exitModal'');
    function closeModal() {
        window.setInterval(function(){
            element.style.opacity = op;
            op = op - 0.01;
        },10);