...

View Full Version : jQuery Help adding automatic fading slides



franko75
07-01-2009, 10:25 PM
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;

}
});



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum