Pure JavaScript fades in function

Question

Hi friends, I want to fade into a div when I click on another div, and for this I use the following code. Code1 works fine, but I need to use Code2 .

I know there is jQuery, but I need to do this in JavaScript

Can you advise me what mistake I am making or what I need to change ...

Code1 - working fine

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 --- Doesn't work

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

Answer 1

Based on this site

EDIT-1
Added functionality so that the user can specify the duration of the animation (comment by @Marzian)

You can try this:

 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

Answer 2

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

Answer 3

It seems like you are trying to convert your element to a string. Try this instead

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

What happens is that I call an anonymous function when the timer hits, and from this function we execute my functioncall to set.

Hope this helps. Jonas

Answer 4

The problem here is that you are using the pass-a-string method to use setTimeout. This is basically just a hidden eval .

It is worth noting that this is bad practice, a slow performer and a security risk.

(see questions like: setTimeout () with a string or (anonymous) function reference? speedwise )

The reason this problem causes your problem is because "seto(" + ele + "," + i + ")" will be evaluated to "seto('[object HTMLDivElement]', 1)" . You really want to pass a reference to the ele object, but the value will be passed to the string when you try to combine the object into a string. You can get around this using the pass-a-function method to use setTImeout.

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

I believe that making this change will make your Code2 behavior equivalent to Code1.

Answer 5

Below are the complete answers to my question

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

Answer 6

My version

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

Answer 7

I just improved laaposto's answer to include a callback. I also added the fade_out function. See laaposto's answer for implementation instructions. You can insert JS below into his fiddle and see an example.

Thank Laaposto! This really helped for my project, which requires zero dependency.

 function fade_out( element, duration, callback ) { element.style.opacity = 0; var last = +new Date(); var tick = function() { element.style.opacity = +element.style.opacity + ( new Date() - last ) / duration; last = +new Date(); if ( +element.style.opacity < 1 ) { ( window.requestAnimationFrame && requestAnimationFrame( tick ) ) || setTimeout( tick, 16 ); } else { callback(); } }; tick(); } function fade_out( element, duration, callback ) { element.style.opacity = 1; var last = +new Date(); var tick = function() { element.style.opacity = +element.style.opacity - ( new Date() - last ) / duration; last = +new Date(); if ( +element.style.opacity > 0 ) { ( window.requestAnimationFrame && requestAnimationFrame( tick ) ) || setTimeout( tick, 16 ); } else { callback(); } }; tick(); } var element = document.getElementById("div1"); fade_out(element, 3000, function(){ console.log("done"); }); 

Hooray!

Answer 8

I just improved laaposto's answer to include a callback. I also added the fade_out function. It can be made more efficient, but it works great for what I'm doing.

Take a look at laaposto's answer for implementation instructions. You can replace JS in his violin with mine and see an example.

Thank Laaposto! This really helped for my project, which requires zero dependencies.

 var el = document.getElementById( "div1" ); function fade_in( element, duration, callback = '' ) { element.style.opacity = 0; var last = +new Date(); var tick = function() { element.style.opacity = +element.style.opacity + ( new Date() - last ) / duration; last = +new Date(); if ( +element.style.opacity < 1 ) { ( window.requestAnimationFrame && requestAnimationFrame( tick ) ) || setTimeout( tick, 16 ); } else { if( is_function( callback ) ) { callback(); } } }; tick(); } function fade_out( element, duration, callback = '' ) { element.style.opacity = 1; var last = +new Date(); var tick = function() { element.style.opacity = +element.style.opacity - ( new Date() - last ) / duration; last = +new Date(); if ( +element.style.opacity > 0 ) { ( window.requestAnimationFrame && requestAnimationFrame( tick ) ) || setTimeout( tick, 16 ); } else { if( is_function( callback ) ) { callback(); } } }; tick(); } function is_function( object_to_check ) { return object_to_check && {}.toString.call( object_to_check ) === '[object Function]'; } fade_out( el, 3000, function(){ fade_in( el, 3000 ) } ); 

Hooray!