Advanced Search

my simple fade object

/ Published in: JavaScript
Save to your folder(s)
Hi
It is my first snipplet. It does simple fade IN/OUT effect.
I wanted to make my homepage nice-looking but without jQuery to master
bare JavaScript.
Usage:
The function uses simple $ function to get dom object which is made fading.
If you don't know $ function replace it with 'document.getElementById'.
Calling instanceName.fadeIn or instanceName.fadeOut with events runs adequate method.
Dom objects that are display=none can't work with my code without minor change.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. var fadeobj2 = function (sender){
  2.  
  3.         var obj = $(sender);
  4.  
  5.         var timer = 20;
  6.         var opStep = 5;
  7.  
  8.         var alpha = 0;
  9.         var iCurrentAlpha = null;
  10.         var endalpha= 100;
  11.         var isFading = null;
  12.  
  13.         this.fadeIn = function (){
  14.                                             iCurrentAlpha = (iCurrentAlpha===null) ? alpha : iCurrentAlpha;
  15.                                             clearInterval(isFading);
  16.                                             isFading = setInterval(function(){changeFading(1);},timer);
  17.         }
  18.  
  19.         this.fadeOut = function (){
  20.                                                 iCurrentAlpha = (iCurrentAlpha===null) ? endalpha : iCurrentAlpha;
  21.                                                 clearInterval(isFading);
  22.                                                 isFading = setInterval(function(){changeFading(-1);},timer);
  23.         }
  24.  
  25.         function changeFading (d){
  26.                                                         obj.style.opacity = iCurrentAlpha*0.01;
  27.                                                         obj.style.filter = 'alpha(opacity=' + iCurrentAlpha+ ')';
  28.                                                         iCurrentAlpha= iCurrentAlpha + (opStep * d);
  29.  
  30.                                                         if (iCurrentAlpha>endalpha || iCurrentAlpha<alpha) {
  31.                                                             clearInterval(isFading);
  32.                                                         }
  33.         }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.