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: 276
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