I wonder if you can do a button with Bounce effect in jquery, but the effect is continuous. I have a button ready but the duration of the effect is only 5s, I wanted it to continue the effect and it did not stop, it follows the file below:
$(document).ready(function(){
$('#down').hide();
$('#animate').animate({fontSize: '10vh'},2000,function(){
$('#down').fadeIn(500,function(){
$(this).effect( "bounce",{ times: 3 }, 5000 );
});
});
});
You can call the effect endless times by placing 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><linkrel="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><buttonid="down">down</button>
<button id="animate">Animate</button> You can create this type of animation only with CSS, just change the value of the scale property of 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>