/ 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.
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
var fadeobj2 = function (sender){ var obj = $(sender); var timer = 20; var opStep = 5; var alpha = 0; var iCurrentAlpha = null; var endalpha= 100; var isFading = null; this.fadeIn = function (){ iCurrentAlpha = (iCurrentAlpha===null) ? alpha : iCurrentAlpha; clearInterval(isFading); isFading = setInterval(function(){changeFading(1);},timer); } this.fadeOut = function (){ iCurrentAlpha = (iCurrentAlpha===null) ? endalpha : iCurrentAlpha; clearInterval(isFading); isFading = setInterval(function(){changeFading(-1);},timer); } function changeFading (d){ obj.style.opacity = iCurrentAlpha*0.01; obj.style.filter = 'alpha(opacity=' + iCurrentAlpha+ ')'; iCurrentAlpha= iCurrentAlpha + (opStep * d); if (iCurrentAlpha>endalpha || iCurrentAlpha<alpha) { clearInterval(isFading); } }