1

minha dúvida é sobre como fazer várias elementos aparecerem com classes e tempos diferentes. A idéia é fazer como a interação de Live do Facebook. O Código é o seguinte:

<ul class="reactions">
   <li class="size1">:)</li>
   <li class="size2">:o</li>
   <li class="size3">:(</li>
   <li class="size1">:/</li>
   <li class="size2">:-</li>
   <li class="size3">:*</li>
</ul>

Pela lógica, o Javascript (ou Jquery) teria que printar esses 6 elementos de maneira randômica sorteando tamanho e "li", não faço idéia de como fazer isso. Eu já tenho eles em html, nao será necessário puxar o banco. Podem me ajudar?

4
  • 1
    Não sei exatamente que interação te referes, podes dar um exemplo com uma imagem?
    – Sergio
    20/03/2017 às 11:33
  • Algo como isso: goo.gl/gPAxrX (me refiro a reactionns superiores) a animação eu já tenho, os <li> já estão programados para quando retirados o diplay:none deles (pois as classes size1, size2 e size3 possuem display:block) eles já animam e vão em direção a esquerda. Só preciso q o javascript faça essa injeção de classes "size" em tempos diferentes. 20/03/2017 às 11:43
  • É algo tipo ver os emoticons a passar flutuando no ecrã, na secção superior como no exemplo deste video?
    – Chun
    20/03/2017 às 11:52
  • Exatamente isso. Meu Css jà faz isso quando eu mudo o diplay:none para block, ele já pega o li e aplica animação, meu problema está no javascript intercalar isso e aplicar em tempos diferentes 20/03/2017 às 11:55

1 Resposta 1

1

Não sei se é a melhor forma de fazer, mas funcionou:

$(document).ready(function() {
  var ul = $("ul").find("li");
  var rand = function() {
    var randNumber = Math.floor((Math.random() * ul.length) + 0);
    ul.each(function() {
      $(this).hide()
    });
    $(ul[randNumber]).show();
    setTimeout(rand, randNumber * 300);
  }
  rand();


})
<script src='https://code.jquery.com/jquery-3.2.0.min.js'></script>
<ul class="reactions">
  <li hidden class="size1">:)</li>
  <li hidden class="size2">:o</li>
  <li hidden class="size3">:(</li>
  <li hidden class="size1">:/</li>
  <li hidden class="size2">:-</li>
  <li hidden class="size3">:*</li>
</ul>

Eu criei um loop com SetTimeout() com tempo aleatório, e uma array com todos os li que fica variando, aproveitando o mesmo número randômico e jogando no índice do array. Este numero vai de 0 até o comprimento do array, e dentro do tempo do loop ele é multiplicado por 300, mas você pode criar outro numero aleatório para especificar o tempo máximo como desejar.

Exemplo no jsfiddle

8
  • Mais ou menos por aí, peguei o trecho do seu código e coloquei no que eu tenho aqui. Veja que a "bolinha" precisa percorrer toda a pagina e não sumir antes da outra aparecer, elas tem q aparecer e percorrer todo a pagina até o css sumir com ela de um lado e reaparecer do outro. codepen.io/duarteleme/pen/MpQjZN para ver a animação toda mude o intervalo de tempo para 1200 20/03/2017 às 12:24
  • Ficou como você desejava? 20/03/2017 às 13:20
  • Ficou Excelente edson mas ainda não é o que preciso como formato final, como pode ver codepen.io/duarteleme/pen/MpQjZN preciso que as "bolinhas" permaneçam na tela até sumirem, mas não uma de cada vez, preciso que ele apareça e não faça "sumir" via .hide(). Apenas faça ir aparecendo, assim consigo mostrar varias bolinhas aparecendo ao mesmo tempo, como no facebook live mesmo goo.gl/gPAxrX 20/03/2017 às 13:28
  • fiz uma uma mudancinha no JS que funcionou: var ul = $(".user"); var rand = function(){ var randNumber = Math.floor((Math.random() * ul.length) + 0); ul.each(function(){ if($(this).offset().left < 50) $(this).hide() }); $(ul[randNumber]).show(); setTimeout(rand, randNumber * 900); } rand(); 20/03/2017 às 15:09
  • 1
    Consertado o html, os li devem estar 'hidden' logo no início, fazendo isto com seu código inicial já é o suficiente, funcionou perfeitamente. 20/03/2017 às 15:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .