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.


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.