Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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);
}
});
http://www.jqueryscript.net/demo/Carousel-Marquee-Like-List-Scrolling-Plguin-For-jQuery-Scrollbox/demos/
Resolvido :)