Fade effect using javascript no jquery?

Question

jQuery derived from javascript has a great way to create a fade effect.

But how can I achieve the same height using native javascript code?

I need the simplest one that fades to zero.

Answer 1

Here is a clean implementation of the fade in and fade out effects using JavaScript.

• Use CSS opacity property
• In the process of attenuation, we decrease the opacity from 0.9 to 0
• In the same way, they fade in the process of increasing from 0.0 to 0.9
• For IE its from 10 to 90

• Use the setTimeout () function to recursively call the fade function with a delay and increase / decrease the opacity to achieve a fade effect

  function fadeOut(id,val){ if(isNaN(val)){ val = 9;} document.getElementById(id).style.opacity='0.'+val; //For IE document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; if(val>0){ val–; setTimeout('fadeOut("'+id+'",'+val+')',90); }else{return;} } function fadeIn(id,val){ // ID of the element to fade, Fade value[min value is 0] if(isNaN(val)){ val = 0;} document.getElementById(id).style.opacity='0.'+val; //For IE document.getElementById(id).style.filter='alpha(opacity='+val+'0)'; if(val<9){ val++; setTimeout('fadeIn("'+id+'",'+val+')',90); }else{return;} } 

You can refer to How to go to Fade Anything With JavaScript for demos and detailed examples.

Greetings -Clain

Answer 2

Try the following:

 function fade(what, duration) { what.opct = 100; what.ih = window.setInterval(function() { what.opct--; if(what.opct) { what.MozOpacity = what.opct / 100; what.KhtmlOpacity = what.opct / 100; what.filter = "alpha(opacity=" + what.opct + ")"; what.opacity = what.opct / 100; }else{ window.clearInterval(what.ih); what.style.display = 'none'; } }, 10 * duration); } 

Use it as:

 fade(htmlobject, 2); // delay is in second 

Answer 3

Creating animations is a pretty delicate task. You have to take care of browser differences when working with CSS properties. Then you should be sure that you know how to work with timers, because they are usually not very accurate in Javascript. In short, it will be easy to write a simple damping effect, but a lot of work is required to do the mapping against jQuery.

You can read this one (well, you have to wait until this is completed) to better understand how jQuery is structured, and then try to hack your own.

Answer 4

You can specify the color with a hexadecimal system or a regular decimal system. An example that uses a hexadecimal system

 BODY {background-color:#FF00FF;} 

and an example that uses a decimal system

 BODY {background-color:rgb(51,0,102)} 

The definition of rgb (255,255,255) represents white, the code rgb (0,0,0) represents black.

So how can you make the fade effect? Well, the easiest way is to use the decimal method:

 <script type="text/javascript"> var red = 255; var green = 255; var blue = 255; var interVal = window.setInterval("fadeEffect()", 1000); function fadeEffect() { if (red > 0 && green > 0 && blue > 0) red--; if (red == 0 && green > 0 && blue > 0) green--; if (red == 0 && green == 0 && blue > 0) blue--; if (red == 0 && green == 0 && blue == 0) window.clearInterval(interVal); //Creates the new code of color colorAttr = "rgb("+red+","+green+","+blue+")"; //However or whereever you make the new color public ... //Reset the first two colors if (red == 0) red == 255; if (green == 0) green = 255; } </script> 

I hope he answers your question or helps you come up with your idea. If you want to use hexadecimal numbers, you had to convert to hexadecimal code before you created a new argument.

Answer 5

Why not use CSS3 transitions?

...

 opacity: 100; -webkit-transition: opacity .5s ease-out; -moz-transition: opacity .5s ease-out; -o-transition: opacity .5s ease-out; transition: opacity .5s ease-out;