Question

I am trying to make the most simple jQuery slideshow
possible. I made the following fiddle to show my progress

I can’t seem to wrap my head around simultaneously removing
and adding the classes to achieve the desired effect

check it out:

http://jsfiddle.net/whiteb0x/pMMa8/

Answer 1

Here’s code that works using CSS3 transitions:

$(document).ready(function() {

function play() {
    setInterval(function(){
        var next = $(".ad .active").removeClass("active").next("img");
        if (!next.length) {
            next = $(".ad img:first");
        }
        next.addClass("active");
    }, 3000);
}
play();

});

And a working jsFiddle: http://jsfiddle.net/jfriend00/8frVL/

Note: this only adds/removes the class. It doesn’t need to change the position of the images in the DOM (like you were doing).

Using this CSS:

.ad {
    height:300px; 
    width:250px; 
    margin:0 1em 1em 0; 
    position:relative;
}

.ad img {
    position: absolute;
    transition:opacity 1s linear; 
    -moz-transition:opacity 1s linear; 
    -webkit-transition:opacity 1s linear;
}

.ad img {
    opacity: 0; 
}

.ad img.active{
    opacity: 1;
}