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); 
}); 

：

Here's a simple solution.末線被替換