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