制作见证滚动条在淡出前留在屏幕上

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：

此时我们可能会注意到我们的三个函数有多么相似，并且想要某种方法来减少 重复性。所以我们可以使用递归，只需改变每次传递的元素。

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