How to replace slide effect to fade out/fade in effect on this slideshow?

Posted by LDam on Stack Overflow See other posts from Stack Overflow or by LDam
Published on 2009-08-31T19:30:44Z Indexed on 2010/04/01 13:23 UTC
Read the original article Hit count: 278

Filed under:
|
|
|
|

Hi guys!

I need replace slide effect to fade-out/fade-in effect on the prev and next slide functions:

function animate(dir,clicked){
    u = true;
    switch(dir){
        case 'next':
            t = t+1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            if(s<3){
                    if (t===3){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                    if (t===2){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(w)});}
            }
            $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                    if (t===s+1) {
                            t = 1;
                            $(o.slides,obj).css({left:0},function(){$(o.slides,obj).animate({left:m})});
                            $(o.slides,obj).children(':eq(0)').css({left: 0});
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});
                    }
                    if (t===s) $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                    if (t===s-1) $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                    u = false;
            });
            break;
        case 'prev':
            t = t-1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            if (s<3){
                    if(t===0){$(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(-w)});}
                    if(t===1){$(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});}
            }
            $(o.slides,obj).animate({left: m}, o.slidespeed,function(){
                    if (t===0) {
                            t = s;
                            $(o.slides,obj).children(':eq('+(s-1)+')').css({position:'absolute',left:(s*w-w)});
                            $(o.slides,obj).css({left: -(s*w-w)});
                            $(o.slides,obj).children(':eq(0)').css({left:(s*w)});
                    }
                    if (t===2 ) $(o.slides,obj).children(':eq(0)').css({position:'absolute',left:0});
                    if (t===1) $(o.slides,obj).children(':eq('+ (s-1) +')').css({position:'absolute',left:-w});
                    u = false;
            });
            break;
        case 'fade':
            t = [t]*1;
            m = (-(t*w-w));
            current(t);
            if(o.autoHeight){autoHeight(t);}
            $(o.slides,obj).children().fadeOut(o.fadespeed, function(){
                    $(o.slides,obj).css({left: m});
                    $(o.slides,obj).children(':eq('+(s-1)+')').css({left:s*w-w});
                    $(o.slides,obj).children(':eq(0)').css({left:0});
                    if(t===s){$(o.slides,obj).children(':eq(0)').css({left:(s*w)});}
                    if(t===1){$(o.slides,obj).children(':eq('+(s-1)+')').css({ position:'absolute',left:-w});}
                    $(o.slides,obj).children().fadeIn(o.fadespeed);
                    u = false;
            });
            break;
        default:
            break;
    }
 };

I had tried, but the auto restart didn't work!

You can view the documentation and download the complete code with the examples in this link: http://github.com/nathansearles/loopedSlider/tree/master

Please help me! (Sorry for my bad english!)

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about loop