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, видимо. Следовательно, затухание не появляется, так как требуется, чтобы желаемое изображение было невидимым. Изображение просто переворачивается на передний план.

Here's a simple solution. Последняя строка была заменена:

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