JQuery - Help adding automatic fading slides

[franko75]

Hi, I have a slideshow set up on my site which allows users to click back and forward to view images - the transition is an animated slide to the next image. But I now want to set up an automatic fade, which fades in the next image on a timer. I'm not entirely sure how to set this up and how to integrate this with my current script without conflicting with it.

Here is what I have so far for the onclick slide animation. If anyone can help with some advice to get me started with the auto fading that would be great!

// project animations
    $("#featured").hover(function(){
        $(this).find(".bottom-slide").animate({bottom:"0"},{queue:false,duration:350});
        $(this).find(".arrow-left").animate({left:"0"},{queue:false,duration:350});
        $(this).find(".arrow-right").animate({right:"0"},{queue:false,duration:350});
    }, function(){
        $(this).find(".bottom-slide").animate({bottom:"-66px"},{queue:false,duration:350});
        $(this).find(".arrow-left").animate({left:"-50px"},{queue:false,duration:350});
        $(this).find(".arrow-right").animate({right:"-50px"},{queue:false,duration:350});
    });
   
    // project arrows
    var currentFeatureSlide = 1;
    var currentFeatureLocation = 0;
    $("a.arrow-left").fadeTo(0,0.2);
   
    var totalFeatureSlides = Math.ceil( ($(".featured-entry > div").size()) );
   
    $("a.arrow-right").click(function(event){
                                    
        if (currentFeatureSlide != totalFeatureSlides) {
               
            if (currentFeatureSlide == 1) { $("a.arrow-left").fadeTo(300,0.75); }
            newFeatureLocation = (currentFeatureLocation + 512);
       
            $(".featured-entry").animate({left:"-"+newFeatureLocation},{queue:false,duration:450});
 
            currentFeatureSlide++;
            if (currentFeatureSlide == totalFeatureSlides) {
                $("a.arrow-right").fadeTo(300,0.2); }
            currentFeatureLocation = newFeatureLocation;
               
        }
       
    });
   
    $("a.arrow-left").click(function(event){
                                  
        if (currentFeatureSlide != 1) {
           
            if (currentFeatureSlide == totalFeatureSlides) {
                $("a.arrow-right").fadeTo(300,0.75); }
               
            newFeatureLocation = (currentFeatureLocation - 512);
           
            if (currentFeatureSlide > 2) {
                newFeatureLocationNum = "-"+newFeatureLocation; } else {
                newFeatureLocationNum = newFeatureLocation; }
            $(".featured-entry").animate({left:newFeatureLocationNum},{queue:false,duration:450});
            currentFeatureSlide--;
            if (currentFeatureSlide == 1) {
                $("a.arrow-left").fadeTo(300,0.2); }
            currentFeatureLocation = newFeatureLocation;
                   
        }
    });