Question

I’m using the jQuery Cycle plugin for a slider – I need to make some fadeIn fadeOut effect inside each slides.
Has any one had any experience with this? Unfortunately I am quite
useless at JavaScript creation, and I have not been able to find any great support documentation.
Here is a example
And my function code is below.

$('#yslider ul').cycle({
           fx:     'fade',
           speed:   'slow',
           timeout: 1000,
           before: first,
           after:    second,
           pager:    '#number',
           pause: 1
        });
        function first(){
            $('.left').fadeOut(800).delay(100).animate({opactiy: 0.5 });
            $('.middle').delay(800).fadeOut(1300).animate({opactiy: 1.0 });
            $('.right').delay(2500).animate({right:'-1980px'}, 700);
        }
        function second(){
            $('.left').fadeIn(1000).delay(300).animate({opactiy: 1.5 });
            $('.middle').fadeIn(1500).delay(500).animate({opactiy: 2.5 });
            $('.right').delay(2500).animate({right: '-26px'}, 700);
        }

Answer 1

all you need is call before: option of cycle.. onBefore initialize your animations and put some delay and then finalize your animation.
i put eq() to perform only current ‘li’ because you are using same class for all sliding tabs.

$(document).ready(function(){
    $('#yslider ul').cycle({
       fx:     'fade',
       speed:   'slow',
       timeout: 10000,
       before: pehla,
       pager:   '#number',
       pause: 1
    });
});
var sliderSize = $('#yslider ul li').size();
function pehla(){
    if(i == sliderSize)
        i = 0;
    $('.left:eq('+i+')').fadeIn(800, function(){
        $('.middle:eq('+i+')').fadeIn(1300, function(){
            $('.right:eq('+i+')').animate({right:'0px'}, 700, function(){
                $('.right:eq('+i+')').delay(4400).animate({right: '-1980px'}, 200, function(){
                    $('.middle:eq('+i+')').fadeOut(1300, function(){
                        $('.left:eq('+i+')').fadeOut(800);
                        i++;
                    });
                });
            });
        });
    });
}

also you’ll need to edit some of your css

.left{left:0;display:none;}
.middle{ left: 13px;top: -75px;display:none;}
.right{right:-1980px;}

set timeout as per your overall animation duration + delay in each slide
here i set 10000 ms = starting animation (800 + 1300 + 700) + delay(4400) + final animation(900+1300+800)