jQuery：最初に画像にfadeIn/fadeOutが機能しない

Question

画像のスライドショーが簡単で、jQueryを使用してフェードアウトし、別のフェードインとフェードインしてZインデックスを変更します。しかし、効果は初めての後でしか働かない。 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.最終ラインはと交換しました