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

Question

标题有点模糊，抱歉。

我想说三个 div(其中只有一些文本)运行一次循环。

这将在页面加载时进行。播放完毕后，该站点将最终显示出来。

我希望这种情况只在您第一次访问该网站时发生一次，因为不得不多次浏览它会很烦人。由于用户将不断返回该页面。

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

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

这是来自 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 并且只播放一次。

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

Answer 1

I would like this to only happen once when you first come to the site as it would be annoying having to sit through it more than once. As the user will be constantly going back to the page this will be on.

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