Posted By

jsluv on 10/22/09

Tagged

Versions (?)

Last Edited at 10/22/09 05:50pm

Statistics

Viewed 340 times

Favorited by 0 user(s)

Related snippets

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.

Highlighted TextExpand

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);
                                                        }
        }

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.