jQuery Slideshow Image Transition

Question

I\'m having an issue with my jQuery slideshow and I can\'t seem to figure it out. During the transition of images the slideshow will flash white instead of nicely fading int

Answer 1

When you click next or previous you should stop the interval and previous animations i.e.:

clearInterval(run);
$('#slideshow img').stop();

When the fade in for the next image is completed you restart the interval i.e.:

$('#slideshow img:last').fadeIn(1000, function() { run=setInterval("switchSlide()", speed);})

edit: If you click 10 times on a switch button within a second. About 20 animations will run simultaneously.

edit: If you click on next or previous while the image is switching (automatically or otherwise) and the fading is already in progress, the fade will proceed from almost faded to completely faded in a time span of an entire effect (so 1 second). In this time the image will be mostly white.

It might be better to set the fade-out on manual switching faster (like 300ms or even less). This will also improve the users experience.

edit: Here is the fiddle

Here is the code:

var speed = 4000;
run = setTimeout("switchSlide()", speed);
$(document).ready(function() {

    $('#caption').html($('#slideshow img:last').attr('title'));

    $('#previous').click(switchBack);
    $('#next').click(switchSlide);

});

function switchSlide() {
    clearInterval(run);
    $('#slideshow img').stop(true,true);
    var jq=$('#slideshow img');
    jq.first().css({'opacity':0}).appendTo('#slideshow').animate({'opacity':1}, 1000, function() { 
        run = setTimeout("switchSlide()", speed); } );
    $('#caption').html(jq.last().attr('title'));
}

function switchBack() {
    clearInterval(run);
    $('#slideshow img').stop(true,true);
    var jq=$('#slideshow img');
    jq.last().animate({'opacity':0},1000, function() { 
        $(this).prependTo('#slideshow').css({'opacity':1}); run = setTimeout("switchSlide()", speed);});
    $('#caption').html(jq.get(1).title);
}