Jquery fadein fadeout slideshow not working properly

Question

I have having some trouble with my jquery slidshow @ http://www.willruppelglass.com/ (bottom)

As you can see the images fadein and fadeout and that works properly and the images are coming from the server and I set the height to 200 for each image. The problem I am having is that the images, after the fadeout, are still displaying and I can see them. What I am trying to do is when the image fades out don't display it, but when it fades in, display it. Is this possible?

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 6500 );   
});

#slideshow {
    position:relative;
    height:200px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

<div id="slideshow">

<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />

<img src="upload/<?php echo $array['image2'] ?>" height="200" />

<img src="upload/<?php echo $array['image3'] ?>" height="200" />

</div>

Any help would be appreciated.

Answer 1

You should add animation code to fadeout the active image so the transition is smoother. If you run all animations simultaneously you will have to tweak the timings to keep things smooth; I'm not sure why that is, but that's why I changed the duration to 2000 milliseconds.

I tested the code below and it seems to work smoothly like this. I do however want to advise you to refactor you code so that you have only 1 animation function left. You should also resize the images you use for the slideshow (5 megabytes for an image is SERIOUS overkill).

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next(): $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 2000, function() {
        $active.removeClass('active last-active');
    });

    $active.animate({opacity: 0}, 2000);
}

If you really only want to hide the image after the show animation is complete, you can use the code below, but that really doesn't look very smooth to me, your choice of course.

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next(): $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 2000, function() {
        $active.removeClass('active last-active');
        $active.css({opacity: 0.0});
    });
}