Javascript 在淡出之前，让一个证明滚动条留在屏幕上

我有一个推荐滚动条，显示一个推荐，淡出，显示下一个，淡出，然后返回到第一个

我的问题是，在淡入动画之后，淡出动画立即开始。它没有足够的时间让人阅读

$（文档）.ready（函数（）{
函数doFade（）{
$（“#一”）.fadeIn（6000，函数（）{
美元（“#一”）。淡出（6000）。延迟（3000）；
设置超时（fadeTwo，6000）；
});
}
函数fadeTwo（）{
$（“#两”）.fadeIn（6000，函数（）{
美元（“#2”）。淡出（6000）。延迟（3000）；
setTimeout（fadeThree，6000）；
});
}
函数fadeThree（）{
$（“#三”）.fadeIn（4000，函数（）{
美元（“#三”）。淡出（6000）。延迟（3000）；
设置超时（doFade，6000）；
});
}
doFade（）；
});

jQuery的delay函数只会延迟链中在它之后调用的函数，因此它对代码没有影响

您需要在呼叫淡出前使用它，例如

$(document).ready(function() {
    function doFade() {
        $("#one").fadeIn(6000,function() {
            setTimeout(fadeTwo,6000);
        })
        .delay(3000)
        .fadeOut(6000);
    }

    function fadeTwo() {
        $("#two").fadeIn(6000,function() {
            setTimeout(fadeThree,6000);
        })
        .delay(3000)
        .fadeOut(6000);
    }

    function fadeThree() {
        $("#three").fadeIn(6000,function() {
            setTimeout(doFade,6000);
        })
        .delay(3000)
        .fadeOut(6000);
    }
    doFade();
});

编辑：

您当前正在设置超时，以便在fadeIn的完整回调中执行下一个函数。这让我觉得有点困惑，我认为做下面这样的事情更简单、更清晰。此外，没有理由在ready函数中定义这三个函数-这是个人偏好，但我喜欢将回调中的代码量保持在最低限度，例如

$(document).ready(function() {
    doFade();
});

function doFade() {
    setTimeout(fadeTwo,12000);
    $("#one").fadeIn(6000).delay(3000).fadeOut(6000);
}

function fadeTwo() {
    setTimeout(fadeThree,12000);
   $("#two").fadeIn(6000).delay(3000).fadeOut(6000);
}

function fadeThree() {
    setTimeout(doFade,12000);
    $("#three").fadeIn(6000).delay(3000).fadeOut(6000);
}

编辑2：

为了进一步减少重复次数，我们可以将整个动画序列提取到一个函数中：

$(document).ready(function() {
    doFade();
});

function fadeInThenOut(element) {
    element.fadeIn(6000).delay(3000).fadeOut(6000);
}

function doFade() {
    setTimeout(fadeTwo,12000);
    fadeInThenOut($("#one"));
}

function fadeTwo() {
    setTimeout(fadeThree,12000);
   fadeInThenOut($("#two"));
}

function fadeThree() {
    setTimeout(doFade,12000);
    fadeInThenOut($("#three"));
}

编辑3：

在这一点上，我们可能会注意到我们的三个函数是多么相似，并希望找到某种方法来减少重复性。所以我们可以使用递归，只需更改每次传入的元素

$(document).ready(function() {
    doFade();
});

function doFade(elementNumber) {
    const elementNumber = elementNumber < testimonialElements.length ? elementNumber : 0;

    setTimeout(doFade(elementNumber + 1),12000);
    $('#' + testimonialElements[elementNumber]).fadeIn(6000).delay(3000).fadeOut(6000);
}

var testimonialElements = ["one","two","three"];

$（文档）.ready（函数（）{
doFade（）；
});
函数doFade（元素编号）{
const elementNumber=elementNumber<鉴定元素.length？elementNumber:0；
设置超时（doFade（elementNumber+1），12000）；
$（“#”+证明元素[元素编号]）.fadeIn（6000）。delay（3000）。fadeOut（6000）；
}
var证明元素=[“一”、“二”、“三”]；

虽然此解决方案可能会在可读性和简单性方面有所损失，但最大的优点是，当您添加第四个证明时，不需要编写函数来处理它。您所要做的就是更改CertificationElements数组以包含新的元素id