Posted By

jsluv on 10/22/09


Tagged

fade in out fadein fadeout


Versions (?)

my simple fade object


 / Published in: JavaScript
 

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.

  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  

You need to login to post a comment.