После того, как загрузится страница зацикливания текста?

Question

Название немного расплывчато, извините за это.

Я хочу сказать, что три divs (только некоторый текст в них) запускают цикл один раз.

Это будет при загрузке страницы. После этого будет окончательно отображен сайт.

Я бы хотел, чтобы это произошло только однажды, когда вы впервые пришли на сайт, так как было бы неприятно сидеть с ним через него. Поскольку пользователь будет постоянно возвращаться на страницу, это будет включено.

До того как я отправил это я был еще один взгляд и нашел эту Jsfiddle

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

Вот JavaScript из Jsfiddle

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

Я хотел бы, чтобы это случиться только один раз, когда вам сначала приходите на сайт , так как было бы неприятно сидеть через него не один раз. Поскольку пользователь будет постоянно возвращаться на страницу, это будет включено.

Эта часть не была освещена в соответствии с принятым ответом. Для того, чтобы сделать играть анимацию только один раз, даже после обновления страницы, просто 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

Чтобы сделать цикл определенное число раз, просто добавьте счетчик клеща() функции:

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();