jQuery: fadeIn / fadeOut не работает с изображениями в первый раз

Question

У меня есть простое слайд-шоу изображений, и я использую jQuery для постепенного исчезновения одного и постепенного изменения в другом, и соответственно изменяю z-index. Но эффекты работают только после первого раза. Как показано здесь: http://jsfiddle.net/AXMX8/1/ (такое же поведение в моем тестовом файле)

Я подумал, что это может быть связано с тем, что изображение еще не загружено, поэтому я попытался обернуть код $ (window) .load () в моем тестовом файле, но он все еще был таким же.

function fadeSlide($out, $in) {
    $out.fadeOut("slow", function(){
        $(this).removeClass("slide-active");
    });

    $in.fadeIn("slow", function(){
        $(this).addClass("slide-active");
    });
}

function switchSlide() {
    var imgs = $('#slides img');
    var current = $('.slide-active');
    var next = current.next();
    if (next.length == 0) {
        next = imgs.eq(0);
    }
    fadeSlide(current, next);
}

setInterval(switchSlide, 2000);

Спасибо за любую помощь.

Answer 1

Когда функция запускается в первый раз, изображение, которое она принимает как переменную $in, является видимым. Следовательно, постепенное появление не появляется, так как оно требует, чтобы желаемое изображение было невидимым. Изображение просто переворачивается вперед.

Вот простое решение. Последняя строка была заменена на:

$(function(){
    $('#slides img').hide();
    $('#slides img').first().show();
    setInterval(switchSlide, 2000);
});