JavaScript puro desaparece na function

Oi amigos eu quero desaparecer em uma div quando eu clico em outro div e para isso eu estou usando o seguinte código. Code1 funciona bem, mas eu preciso usar o Code2 .

Eu sei que há jQuery, mas eu preciso fazer isso em JavaScript

Você pode me guiar que tipo de erro eu estou cometendo ou o que eu preciso mudar …

Code1 — funciona bem

function starter() { fin(); } function fin() { for (i = 0; i <= 1; i += 0.01) { i=Math.round(i*100)/100; setTimeout("seto(" + i + ")", i * 1000); } } function seto(opa) { var ele = document.getElementById("div1"); ele.style.opacity = opa; } 

Code2 — não funciona

 function starter() { var ele = document.getElementById("div1"); fin(ele); } function fin(ele) { for (i = 0; i <= 1; i += 0.01) { i=Math.round(i*100)/100; setTimeout("seto(" + ele + "," + i + ")", i * 1000); } } function seto(ele,opa) { ele.style.opacity = opa; } 

Baseado neste site

EDIT-1
Adicionado a funcionalidade para que o usuário possa especificar a duração da animação (comentário @Marzian)

Você pode tentar isto:

 function fadeIn(el, time) { el.style.opacity = 0; var last = +new Date(); var tick = function() { el.style.opacity = +el.style.opacity + (new Date() - last) / time; last = +new Date(); if (+el.style.opacity < 1) { (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); } }; tick(); } var el = document.getElementById("div1"); fadeIn(el, 3000); //first argument is the element and second the animation duration in ms 

DEMO

 var div = document.getElementById('div'); div.style.transition="opacity 1s"; div.style.opacity="0"; 

Parece que você está tentando converter seu elemento em uma string. Tente isso ao invés

 function starter() { var ele = document.getElementById("div1"); fin(ele); } function fin(ele) { for (i = 0; i <= 1; i += 0.01) { i=Math.round(i*100)/100; setTimeout(function() { setto(ele,i); }, i * 1000); } } function seto(ele,opa) { ele.style.opacity = opa; } 

O que acontece aqui é, que eu chamo de uma function anônima quando o timer acerta e, a partir dessa function, executo minha chamada de function para setto.

Espero que ajude. Jonas

O problema aqui é que você está usando o método pass-a-string de usar setTimeout. Que é basicamente apenas um eval escondido.

Vale a pena notar que esta é uma prática ruim, lento desempenho e risco de segurança.

(veja questões como esta: setTimeout () com string ou referência de function (anônima)? speedwise )

A razão pela qual isso está causando o seu problema é porque "seto(" + ele + "," + i + ")" vai ser avaliado como "seto('[object HTMLDivElement]', 1)" . Você realmente quer passar referência ao object ele – mas o valor está sendo convertido em uma string quando você tentou concatenar um object em uma string. Você pode contornar isso usando o método pass-a-function de usar setTImeout.

setTimeout(function() { seto(ele, i); }, i * 1000);

Acredito que essa alteração tornará seu comportamento Code2 equivalente ao Code1.

Abaixo estão as respostas completas para minha pergunta

ANS1 — DEMO

 function fin() { var i = 0; var el = document.getElementById("div1"); fadeIn(el,i); } function fadeIn(el,i) { i = i + 0.01; seto(el,i); if (i<1){setTimeout(function(){fadeIn(el,i);}, 10);} } function seto(el,i) { el.style.opacity = i; } 

ANS2 --- DEMO

 function fin(){ var i = 0; var el = document.getElementById("div1"); fadeIn(el,i); } function fadeIn(el,i) { var go = function(i) { setTimeout( function(){ seto(el,i); } , i * 1000); }; for ( i = 0 ; i<=1 ; i = i + 0.01) go(i); } function seto(el,i) { el.style.opacity = i; } 

Minha versão

  function fadeIn($element){ $element.style.display="block"; $element.style.opacity=0; recurseWithDelayUp($element,0,1); } function fadeOut($element){ $element.style.display="block"; $element.style.opacity=1; recurseWithDelayDown($element,1,0); } function recurseWithDelayDown($element,startFrom,stopAt){ window.setTimeout(function(){ if(startFrom > stopAt ){ startFrom=startFrom - 0.1; recurseWithDelayDown($element,startFrom,stopAt) $element.style.opacity=startFrom; }else{ $element.style.display="none" } },30); } function recurseWithDelayUp($element,startFrom,stopAt){ window.setTimeout(function(){ if(startFrom < stopAt ){ startFrom=startFrom + 0.1; recurseWithDelayUp($element,startFrom,stopAt) $element.style.opacity=startFrom; }else{ $element.style.display="block" } },30); } 
Intereting Posts