hemant patel: Javascript Cross browser Fading Effect ( JS OOPs )


<html><head>
<script type="text/javascript">

//
//Start fading Object 
//

/**
*Fading Effect 
*
* ops is optional can have keys like def
* id: elements id 

* min: minimum opecity
* max: maximum opecity
* duration: in miliseconds to transform opecity from min <-> max
* remove_onhide: if true set dislay:none else selt visibility:hidden on hide
* onshow: callback function triggred on before showing_start
* onhide: callback function triggred on after hiding_end
*/

var Fading = function ( id , ops  ){
    var def = {min:0, max:100, duration:500, remove_onhide:true, onshow:null, onhide:null };

    
    ops = ops || {};

    this.id = id; 
    this.obj  = document.getElementById(id);
    this.css = this.obj.style;

    this.css_visible_atr = ( 'div' == this.obj.tagName.toLowerCase() ) ? 'table' : ''; //table for div under IE

    this.hiding  = true;
    
    for( var k in def )

    {
        this[k] = ops[k] || def[k];
    }
    this.cur = this.max;
}

/**
* display object with Fading
*/
Fading.prototype.show = function (){
    if( this.cur != this.max ){

        this.cur = this.min;
        this.hiding = true;
        this._opacity( this.min, this.max, this.duration );

    }
}

/**
* hide object with Fading
*/
Fading.prototype.hide = function () {

    if( this.cur != this.min ){
        this.hiding = false;
        this.cur = this.max;

        this._opacity( this.max, this.min, this.duration );
    }
}

/**

*imidiate hide object without trigering callback functions
*/
Fading.prototype.hideSilent = function (){
    
    this.cur = this.min;

    this._changeOpac();
    this._showHide(false);
    this.hiding = false;
}

/**
*imidiate hide object without trigering callback functions
*/
Fading.prototype.showSilent = function (){

    this.cur = this.max;

    this._changeOpac();
    this._showHide(true);
    this.hiding = true;
}


Fading.prototype._changeOpac = function ( ) {
    //change the opacity for different browsers
    //console.debug( this.cur  );
    var opecity_per = this.cur / 100;

    this.css['opacity'] = opecity_per;
    this.css['MozOpacity'] = opecity_per;
    this.css['KhtmlOpacity'] = opecity_per;

    this.css['filter'] = "alpha(opacity=" + this.cur + ")";
    
    this.cur =( this.hiding ) ?  Math.min( this.max, ++this.cur) : Math.max(this.min, --this.cur);

}

Fading.prototype._showHide = function (show_flag){
    if( this.remove_onhide ){
        this.css['display'] = ( show_flag ) ? this.css_visible_atr : 'none';

    }else{
        this.css['visibility'] = ( show_flag ) ? 'visible' : 'hidden';

    }
}

Fading.prototype._opacity = function ( opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);

    var timer = 0, i=0;
    var _self = this;
    //determine the direction for the blending, if start and end are the same nothing happens

    if(opacStart > opacEnd) {
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout( function(){ _self._changeOpac( );  }, (timer * speed) );

            timer++;
        }
        setTimeout(function(){
                       _self._showHide(false);

                        if( 'function' == typeof(_self.onhide) ){
                            _self.onhide.call(_self.obj);
                        }

                    }, (timer * speed) );
                    
    } else if(opacStart < opacEnd) {
        _self._showHide(true);

        if( 'function' == typeof(_self.onshow) ){
            _self.onshow.call(_self.obj);
        }

        for(i = opacStart; i <= opacEnd; i++){
            setTimeout( function(){ _self._changeOpac( );  }, (timer * speed) );
            timer++;
        }

    }
}
//
// END OF FADDING OBJECT
//

window.onload = function (){

    window.oFoo = new Fading('foo');
    window.oBar = new Fading('bar', {duration:2000, onshow:on_bar_showing, onhide:on_bar_hiding});

}

function on_bar_showing(){
    this.innerHTML += '<br> on_bar_showing()' ;

}
function on_bar_hiding(){
    this.innerHTML  += '<br> on_bar_hiding()' ;
}

</script>
<style>
#foo {  display:table; background-color:#450712; border:1px solid #121212; width:100px; height:100px; color:#FFFFFF;}

#bar {  display:table; background-color:#895623; border:1px solid #659898; width:100px; height:100px; color:#FFFFFF;}

</style>
</head>

<body>
<input type="button" onclick="oFoo.show();" value="show Foo" />

<input type="button" onclick="oFoo.hide()" value="hide Foo" />


<br>

<input type="button" onclick="oBar.show();" value="show Bar" />
<input type="button" onclick="oBar.hide()" value="hide Bar" />

<input type="button" onclick="oBar.showSilent();" value="show Bar Silently" />
<input type="button" onclick="oBar.hideSilent()" value="hide Bar Silently" />


<div id="foo" >Foo</div>
<div id="bar" >Bar</div>

</body>
</html>
hemant patel

Javascript Cross browser Fading Effect ( JS OOPs )

0 comments:

Archivo del blog

Nuestra dirección
