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