Slides fadeOut and fadeIn

The effect of this slideshow I'm going to introduce here may be similar to that of fadeIn slideshow. But it acts a slight differently. When the active slide fadeIn, the previous slide fadeOut simultaneously rather than become opacity 0 in one step.

The HTML and CSS is the same as used in fadeIn slideshow. What is the different is I modified the fadeIn function as follow. This function allows to accept 2 elements in an Array. The 1st One fadeOut and the 2nd one fadeIn simultaneously.

function Opacityto(elm,v){
    elm.style.opacity = v/100; 
    elm.style.MozOpacity =  v/100; 
    elm.style.KhtmlOpacity =  v/100; 
    elm.style.filter=" alpha(opacity ="+v+")"; 
}

function $f(elms){
var $f = elms;
$f.fadeIn = function(delay,callbk,out) {
        var _this = this;
        for (i = 1; i <= 100; i++) {
          (function(j) {
                setTimeout(function() {  
                      if (out==true) j=100-j;
                      Opacityto(_this[1],j);                
                      _this[1].style.zoom = 1;                 
                      Opacityto(_this[0],100-j);
                      _this[0].style.zoom = 1;                              
                      if (j==100&&callbk!=undefined) {callbk.call(_this);}
                      else if (out==true&&callbk!=undefined&&j==0) {callbk.call(_this);}
                    },j*delay/100);            
            })(i);     
        }
    };
    $f.fadeOut = function(delay,callbk) {
        $.fadeIn(delay,callbk,true);
    };  
    return $f;  
} 

slideshow object

With the modified function, the constructor and everything looks similar to fadeIn slideshow. Only we need to look at a little difference on the show method.

...

show: function(){
    _this.k = (_this.dir == "plus") ? _this.k+1 : _this.k-1;
    if (_this.k== _this.len) {
        _this.dir = "minus";
        _this.k = _this.len -1;
    }
    else if (_this.k==0) {
        _this.dir = "plus";  
        _this.k = _this.k+1;
    } 
    _this.zindex +=1;
    if (_this.dir == "plus") {   
        _this.lis[_this.k].style.zIndex = _this.zindex;
        var elms = [_this.lis[_this.k-1],_this.lis[_this.k]];     
    }
    else if (_this.dir == "minus") { 
        _this.lis[_this.k-1].style.zIndex = _this.zindex; 
         var elms = [_this.lis[_this.k],_this.lis[_this.k-1]];   
    }
    
     $f(elms).fadeIn(1000);
        
},

How to use ?

Just 2 lines to go ...

 
var ss1 = new slideshow("nt");
ss1.go();

Demo

Demo of Slides fadeOut and fadeIn