Following Slides with description box, in this tutorial I will make some modification so that the description box fadeOut.

The normal fadeIn and fadeOut is not an issue. But remember the initial opacity of description div is not 100. So we need some modifications on our basic fadeIn and fadeOut function.

Here is our modified function for a more complicated fadeIn and fadeOut. It may be further synthesized but is enough for our use here. It can accept 2 elements as an array, fadeIn or fadeOut. And it can also accept one element, fadeOut from part transparency.

function $f(id){

    var $f =  (typeof id  =="string") ? document.getElementById(id) : id;
    $f.fadeIn = function(delay,callbk,out) {
        var _this = this;
        if(!isArray(_this)) {
        var opt = getOpacity(_this);
        }
        else
        var opt = 100;
        
        for (i = 1; i <= opt; i++) {
          (function(j) {
                setTimeout(function() {  
                   if (out==true) j=opt-j;                
                   if (isArray(_this)) {
                      Opacityto(_this[1],j);                
                      _this[1].style.zoom = 1;                 
                      Opacityto(_this[0],100-j);
                      _this[0].style.zoom = 1; 
                    }
                    else {                       
                         Opacityto(_this,j);
                         _this.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) {
        $f.fadeIn(delay,callbk,true);
    };
   
    return $f;  
} 

slideshow object

With this function, it will be much easy to construct the slideshow object. Let's look at the main method - show.

Everything is almost the same as the slides with description div moving out but the description div fadeOut. And after fadeOut, its top value goes to initial value and opacity returns to half transparent.

...
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;
    h1 = 300;
    h2 = 200;   
    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]];        
    }  
     $("des").style.zIndex = _this.zindex+1;
     $f(elms).fadeIn(1000,function(){
          $("des").move({delay:100,to:{left:0,top:h2}},function(){           
               ( function(){
                 $f("des").fadeOut(1200,function(){
                     this.style.top = h1+"px";
                     Opacityto(this,80);
                 });
                }).delay(2200);      
          });  
     });      
},

How to use ?

Just 2 lines to go ...

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

Demo

Demo of Slides fadeIn with description box fadeOut