Question

标题有点模糊，抱歉。

我想说三个div（只是其中的一些文本）来运行一次循环。

这将是页面加载。播放完毕后，将最终显示该网站。

我希望这只发生一次，当你第一次来到网站，因为不必一次坐下来会很烦人。由于用户将不断返回页面，因此将会打开。

在我发布这篇文章之前，我再看了一眼，找到了这个Jsfiddle

这是来自Jsfiddle的JavaScript

function tick() {
    var $obj = $(".major_data .commitment_box .commitment");
    $obj.first().fadeIn().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        tick();
    });
}
tick();

它越来越少我想要但是它停在最后一个div并且只播放一次。

我觉得我可能必须创建一个单独的页面，并在新页面而不是最后一个div中加载JavaScript。这样我就可以在没有动画的情况下将用户链接回这个页面了吗？

Answer 1

我希望这只在您第一次来到网站时发生一次因为不止一次地坐下来会很烦人。如用户将不断返回到此页面。

这部分内容并未包含在已接受的答案中。为了只播放一次动画，即使在刷新页面之后，只需set a cookie并在播放动画之前阅读它：

var i = 0;
function tick() {
    if (i > 3) return;
    var $obj = $(".major_data .commitment_box .commitment");

    $obj.first().fadeIn().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        i++;
        tick();
    });
}

if (typeof Cookies.get('animation_played') == 'undefined') {
    tick();
    Cookies.set('animation_played', true);
}

Answer 2

要使其循环特定次数，只需在tick（）函数中添加一个计数器：

var i = 0;
function tick() {
    if (i > 3) return;
    var $obj = $(".major_data .commitment_box .commitment");

    $obj.first().fadeIn().delay(1000).fadeOut(function () {
        $obj.first().insertAfter($obj.last());
        i++;
        tick();
    });
}
tick();

文本淡出循环页面加载后？

2 个答案: