Continuous Jquery Bounce effect

Question

I wonder if you have how to make a button with Bounce effect in jquery, however, the effect is continuous. I have a button ready but the duration of the effect is only 5s, I wanted to have continuity the effect and not stop, follows below the file:

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

    });

});

Answer 1

You can create this type of animation with CSS only, just change the value of the property scale the button in question. Using @keyframes together with the property 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>

Answer 2

You can call the effect endlessly by putting it inside a function and calling it again whenever you finish:

$(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>