javascript - 在淡出之前让推荐滚动条停留在屏幕上

Question

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

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

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

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

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

Answer 1

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

您需要在调用 fadeOut 之前使用它，例如

$(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:

在这一点上，我们可能会注意到我们的三个函数非常相似，并且想要一些方法来减少 that 重复性。所以我们可以使用递归，每次只改变我们传入的元素。

$(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"];

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