0

Gostaria de saber se tem como fazer um botão com efeito Bounce em jquery, porem, o efeito ser continuo. Tenho um botão pronto porem a duração do efeito é somente 5s, queria que tivesse continuidade o efeito e não parasse, segue abaixo o arquivo:

$(document).ready(function(){
    $('#down').hide();
    $('#animate').animate({fontSize: '10vh'},2000,function(){
        $('#down').fadeIn(500,function(){
            $(this).effect( "bounce",{ times: 3 }, 5000 );
        });

    });

});

2 Respostas 2

1

Pode chamar o efeito infinitas vezes colocando ele dentro de uma função e chamando-a novamente sempre que terminar:

$(document).ready(function(){
   $('#down').hide();
   $('#animate').animate({fontSize: '10vh'},2000,function(){
      $('#down').fadeIn(500,function(){
         var self = $(this);
         (function bounce(){
            self.effect("bounce", { times: 3 }, 5000, bounce);
         })();
      });
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<button id="down">down</button>
<button id="animate">Animate</button>

1
  • isso mesmo que eu queria hahaha !! Nota 10
    – Burigo
    Commented 5/02/2018 às 23:05
1

Pode criar esse tipo de animação somente com CSS, basta alterar o valor da propriedade scale do botão em questão. Utilizando @keyframes em conjunto com a propriedade animation:

@keyframes bounce {
  from {
    transform: scale(1.1)
  }
  to {
    transform: scale(1)
  }
}

button {
  animation: bounce 400ms alternate infinite;
  background: #778beb;
  border: none;
  color: #fff;
  padding: 8px 20px
}

/* regra abaixo é somente p/ tornar o snippet + bonitin. */
html, body { height: 100%; display: flex; align-items:center; justify-content: center }
<button>Bounce!</button>

2

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 .