fade effect using javascript no jquery?

Question

jQuery derived from javascript have beautiful method of creating fade effect.

But how can I achieve same height using my own custom javascript code?

I wanted the most simple one.. which fades out to zero.

Answer 1

Here is a pure implementation of fade in and fade out effect using JavaScript.

1. Make use of CSS Opacity property

2. During fade out process, we reduce the opacity value from 0.9 to 0

3. Similarly fade in process increase the 0.0 to 0.9

4. For IE its 10 to 90

5. Use setTimeout() function to call the fade function recursively with delay and increase / decrease opacity value to achieve the 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;}
   }
   

Cheers -Clain

Answer 2

Try this :

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 like :

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

Answer 3

Creating animations is quite a delicate task. You have to take care of browser differences in handling CSS properties. Then you have to be sure 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 fading effect, but it will take a fair amount of work to make one that is comparable to jQuery.

You can read this (well, you have to wait for it to be finished) to have a better idea of how jQuery is structured, and then try to rool your own.

Answer 4

you can define a color with hexadcimal system or ordinary decimal system. An example that uses the hexadecimal system

BODY {background-color:#FF00FF;}

and an example that uses the decimal system

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

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

So how you can made a fade effekt? Well, the easiest way is to use the way with decimal code:

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

Hopefully it will answer your question or help you to come up with your own idea. If you want to use hexadecimal numbers, then you had to convert into hexa code before you had created the new argument.

Answer 5

Why not using 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;