Una forma para que realmente estes esperando a que termine la animación para comenzar de nuevo, sería la siguiente:
Ejecutar una animación infinitas
- Crear una función (
eg: animateSkillbar
) para ejecutar la animación
- Luego utilizar la opción
complete
("Una función que se llama una vez que la animación de un elemento está completa") e indicamos que queremos ejecutar la función creada (eg: animateSkillbar
).
Ejemplo:
function animateSkillbar(){
$('.skillbar').each(function () {
$(this).find('.skillbar-bar').animate({
width: $(this).attr('data-percent')
}, {
duration: 1500,
complete: animateSkillbar
});
});
}
Ejecutar animación cada 5 segundos
:
Ejemplo:
function animateSkillbar(){
$('.skillbar').each(function () {
$(this).find('.skillbar-bar').animate({
width: $(this).attr('data-percent')
}, {
duration: 1500,
complete: function() {
window.setTimeout(animateSkillbar, 5000);
}
});
});
}