setInterval em elementos filhos - jQuery

[ErickCristiano 0]

Boa tarde galera, sou back-end mas estou com uma necessidade front.
Se alguém puder ajudar, agradeço.


Tenho várias listas em minha página com a classe 'Horarios'.

<ul class="Horarios">
<li>15:10</li>
<li>15:30</li>
<li>16:20</li>
<li>16:40</li>
<li>17:30</li>
<li>18:10</li>
<li>19:00</li>
</ul>

 

 

Na lista, apenas três li's são mostradas, as outras quebram e ficam ocultas, formando uma espécie de tabela mostrando apenas uma linha.

 

Seguindo o exemplo acima, inicialmente seria mostrado apenas:

 

15:10 | 15:30 | 16:20

 

 

Enfim, essa classe executará um scrollTop depois de um delay, seguindo um ciclo, por exemplo:

 

Mostraria esses três '15:10 | 15:30 | 16:20' por 7 segundos, depois seria executado o scrollTop dentro da ul e seria mostrado '16:40 | 17:30 | 18:10', após isso, ocorreria novamente um scrollTop indo para a última linha que no caso teria só uma li '19:00'. Depois de chegar ao fim, outro scrollTop seria executado e voltaria para a linha acima (2ª linha) e em seguida o último scrollTop do ciclo seria executado voltando para a primeira linha, uma espécie de "bate e volta".

 

Eu já consegui realizar essa ação, meu problema é que preciso repetir esse processo nessas ul's, não esquecendo que não posso afetar o tempo das outras ul's que possuem uma quantidade diferente de childs.

 

Perdão pelo código de iniciante, provavelmente não está dos melhores com essa quantidade de linhas, mas aguardo dicas :D

 

 

Segue a função:

 

 

$('.Horarios').each(function() {

var Size = $(this).find('li').size();

if (Size > 3 && Size <= 6)

{

// basicamente preciso jogar um setInterval(function(){ aqui, mas dessa forma não está rodando.

$(this).delay(10000).animate({ scrollTop: 70 }, 1000);

$(this).delay(20000).animate({ scrollTop: 0 }, 1000);

//},20000);

}

else if (Size > 6 && Size <= 9)

{

$(this).delay(10000).animate({ scrollTop: 70 }, 1000);

$(this).delay(20000).animate({ scrollTop: 140 }, 1000);

$(this).delay(30000).animate({ scrollTop: 70 }, 1000);

$(this).delay(40000).animate({ scrollTop: 0 }, 1000);

}

else

{

$(this).delay(10000).animate({ scrollTop: 70 }, 1000);

$(this).delay(20000).animate({ scrollTop: 140 }, 1000);

$(this).delay(30000).animate({ scrollTop: 210 }, 1000);

$(this).delay(40000).animate({ scrollTop: 140 }, 1000);

$(this).delay(50000).animate({ scrollTop: 70 }, 1000);

$(this).delay(60000).animate({ scrollTop: 0 }, 1000);

}

});

 

 

[ErickCristiano 0]

http://www.jqueryscript.net/demo/Carousel-Marquee-Like-List-Scrolling-Plguin-For-jQuery-Scrollbox/demos/

 

Resolvido :)