Javascript Como criar um looping usando Javascript ou Jquery

imDEV · 30 de setembro de 2022

Olá pessoal, tudo bem?

Estou com um problema onde preciso criar um looping em uma animação criada com Jquery, através do framework Semantic-UI

Vamos lá.

para criar uma animação dentro do semantic-ui devo escrever da seguinte forma:

            $('.flipar')
            .transition('horizontal flip', '1500ms')
            .transition('vertical flip','1500ms')

na documentação do Semantic-UI mostra que para eu criar um looping em uma animação basta adicionar :

            .transition('set looping')

porém quando eu coloco o Set Looping, ele trava o looping somente na primeira animação, no caso horizontal flip.

Se eu não colocar o Set Looping ele executa uma animação depois da outra da forma certa.

Tentei com while e for, não funcionou. Talvez eu tenha feito da forma errada tambem.

Eu queria apenas fazer com que essa animação fique em um looping infinito e na documentação não achei nada relacionado a looping para mais de uma animação.

Meu HTML está da seguinte forma:

<div class="active side flipar" style="font-family:'nova flat';">Texto</div>

imDEV · 3 de outubro de 2022

@DiF Consegue me salvar nessa aqui ?

Marcelo Calazans · 4 de outubro de 2022

15 horas atrás, imDEV disse:

@DiF Consegue me salvar nessa aqui ?

Olá, colega.

Fiz um exemplo básico aqui adaptado do GeeksforGeeks, e para mim está funcionando.

Segue abaixo:

<!DOCTYPE html>
<html>
  <head>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"
    />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
   </script>
    <style>
      body {
        padding: 0;
        margin: 0;
      }     
    </style>
  </head>
 
  <body>
    
  <img src= "https://upload.wikimedia.org/wikipedia/commons/4/43/GeeksforGeeks.svg" alt="GeeksforGeeks" class="gfg icon" />
        

<script>
$(function() {
   $('.gfg.icon').transition('set looping').transition('horizontal flip in');
});
      
</script>
</body>
</html>