制作一个简单的淡入淡出&；使用jQuery循环

我想用jQuery做一个简单的fadeIn淡出&循环

第一次就可以了！但当再次循环时，fadeIn#pic2被隐藏。如何修复它

html

js

---

您的代码依赖于动画的计时非常精确，并且浏览器往往会失去同步。您应该修改Javascript，使其如下所示：

runslide();

function runslide() {
    $('#pic1').fadeIn(1500).delay(3500).fadeOut(1500, function() {
        $('#pic2').fadeIn(1500).delay(3500).fadeOut(1500, function() {
            runslide();
        });
    });
}

这将通过等待上一个动画结束后再开始下一个动画来保持动画同步

下面是一个工作示例。我用文本替换了您的图像，但在其他方面都是相同的代码。

---

您的代码依赖于动画的精确计时，而浏览器往往会失去同步。您应该修改Javascript，使其如下所示：

runslide();

function runslide() {
    $('#pic1').fadeIn(1500).delay(3500).fadeOut(1500, function() {
        $('#pic2').fadeIn(1500).delay(3500).fadeOut(1500, function() {
            runslide();
        });
    });
}

这将通过等待上一个动画结束后再开始下一个动画来保持动画同步

下面是一个工作示例。我用文本替换了您的图像，但在其他方面都是相同的代码。

$(document).ready(function() {

    runslide();

    function runslide() {
    $('#pic1').fadeIn(1500).delay(3500).fadeOut(1500);
    $('#pic2').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);

    setTimeout(runslide, 10000);
    }

});

runslide();

function runslide() {
    $('#pic1').fadeIn(1500).delay(3500).fadeOut(1500, function() {
        $('#pic2').fadeIn(1500).delay(3500).fadeOut(1500, function() {
            runslide();
        });
    });
}