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

Question

标题有点模糊，很抱歉。

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

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

我希望这种情况在你第一次来网站时只发生一次，因为坐着看不止一次会很烦人。由于用户将不断返回页面，这将打开。

在我发布这篇文章之前，我又看了一眼，发现了这个Jsfidle

http://jsfiddle.net/hungerpain/NMSpx/1/

这是Jsfidle 的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，只播放一次。

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

Answer 1

我希望这种情况在你第一次来到网站时只发生一次因为坐着看不止一次会很烦人。像用户将不断返回到该页面。

这部分内容未包含在已接受的答案中。为了只播放一次动画，即使在页面刷新后，也只需设置一个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();