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

jQuery：fadeIn / fadeOut第一次不能用于图像

1 个答案: