jquery fade slider not transitioning

Question

I'm trying to make a little jquery slider to simply fade between images, however when it goes to fade to the next slide, it shows a slide for a second, and then goes back to the first. I'm not the best with jquery, let alone JavaScript, I'm a PHP/BASH guy.

http://jsfiddle.net/mrVGL/3/

jQuery

                    // Start Slides

                    $('#hi1').fadeTo("slow", 1.0, function () {

                        var slide = 1,
                            slides = 4
                            ids = [
                                '#hi1',
                                '#hi2',
                                '#hi3',
                                '#hi4', ],
                            slideShow = setInterval(function () {
                                var nextSlide = slide + 1;
                                if (slide >= slides) {
                                    nextSlide = 1;
                                }
                                $(ids[nextSlide]).fadeTo("fast", 1.0, function () {
                                    $(ids[slide]).fadeTo("slow", 0);
                                });
                                slide++;
                                if (slide >= slides) {
                                    slide = 1;
                                }
                            }, 5000);
                        // End Slides

                    });

Answer 1

The nextslide check passed the count because you were checking the current slide. First fadeout your previous slide, then fadein the upcoming. Array index starts at 0, so it would make sense to start a variable representing an array index with 0.

Anyway try the following! :)

// Start Slides
$('#hi1').fadeTo("slow", 1.0);
var slide = 0,
ids = [
    '#hi1',
    '#hi2',
    '#hi3',
    '#hi4', ],
countSlides = slides.length,
slideShow = setInterval(function () {
    var nextSlide = slide + 1;
    if (nextSlide > countSlides - 1) {
        nextSlide = 0;
    }
    $(ids[slide]).fadeTo("slow", 0);
    $(ids[nextSlide]).fadeTo("fast", 1.0);
    slide++;
    if (slide > countSlides - 1) {
        slide = 0;
    }
}, 1000);