Ciao a tutti,
sto sbattendo per creare un loop di animazioni su dei pulsanti che siano lente (duration:5000) ma che non vadano a scatti, per farlo ho dato delle classi ai pulsanti e a queste ho attribuito un animazione in jQuery, le ho provate tutte ma essendo molto lente vanno a scatti, conoscete un modo per risolvere?
Esempio script jQuery:
codice HTML:
<script type="text/javascript">
/* ANIMAZIONI */
var startAnimation = function(speed,easing){
//Animation top left
jQuery('.animate-top-left')
.animate({top:'-=5',left:'-=5'},{ duration: speed, specialEasing: {top: easing, left: easing} })
.animate({top:'+=5',left:'+=5'},{ duration: speed, specialEasing: {top: easing, left: easing} });
//Animation top right
jQuery('.animate-top-right')
.animate({top:'-=5',right:'-=5'},{ duration: speed, specialEasing: {top: easing, right: easing} })
.animate({top:'+=5',right:'+=5'},{ duration: speed, specialEasing: {top: easing, right: easing} });
//Animation top left
jQuery('.animate-bottom-left')
.animate({bottom:'-=5',left:'-=5'},{ duration: speed, specialEasing: {bottom: easing, left: easing} })
.animate({bottom:'+=5',left:'+=5'},{ duration: speed, specialEasing: {bottom: easing, left: easing} });
//Animation top right
jQuery('.animate-bottom-right')
.animate({bottom:'-=5',right:'-=5'},{ duration: speed, specialEasing: {bottom: easing, right: easing} })
.animate({bottom:'+=5',right:'+=5'},{ duration: speed, specialEasing: {bottom: easing, right: easing}, complete: function(){startAnimation(speed,easing);} });
}
jQuery(document).ready(function(){
startAnimation(5000,'linear'); //Avvio l'animazione delle classi
})
</script>
Ringrazio anticipatamente quanti vorranno aiutarmi.