Advanced Search

Return to Snippet

Revision: 19407
at October 22, 2009 17:50 by jsluv
Initial Code 
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);
                                                        }
        }
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
my simple fade object

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript