AJAX

JQuery - Help adding automatic fading slides

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Dec 2008

Posts: 7

Reputation: franko75 is an unknown quantity at this point

Solved Threads: 0

franko75

Offline

Newbie Poster

JQuery - Help adding automatic fading slides

Jul 2nd, 2009

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!

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
// 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;
 
        }
    });
// 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;
                   
        }
    });