3

Hola amigos soy nuevo en el mundo del jquery y estoy realizando mi portafolio web y quiero que una animación se repita infinitamente... agradecería mucho su ayuda !!!

$('.skillbar').each(function () {
    $(this).find('.skillbar-bar').animate({
        width: $(this).attr('data-percent')
    }, 1500);
});

2 respuestas 2

3

Simple, usa el método nativo de javascript setInterval, ejecutará todo lo que le pongas dentro de la función que recibe como primer párametro cada N milisegundos que le indiques en su segundo párametro:

setInterval(function(){
  console.log('Hola, soy una animación, wii!');
}, 5000); // 5000 milisegundos = 5 segundos

Para tu código sería algo así:

function animate(){

  $('.skillbar').each(function () {
      $(this).find('.skillbar-bar').animate({
          width: $(this).attr('data-percent')
      }, 1500);
  });
  
}

setInterval(animate, 5000);

6
  • no me funciono copio link de lo que quiero animar bizcomputers.com.co/home/paquetes-de-inversion el 18 abr. 2017 a las 21:07
  • @NestorLedezma Yo visualizo correctamente la animación cada 5 segundos
    – Jorius
    el 18 abr. 2017 a las 21:11
  • @joruis yo pensé que la barras lo que harían es que se vacíen y se llenen constantemente el 18 abr. 2017 a las 21:16
  • Eso hace parte ya, de tu código, pero el interval se está ejecutando cada 5 segundos correctamente, así que prueba mejor a aceptar mi respuesta como correcta y realizar una nueva para la animación que quieres :D
    – Jorius
    el 18 abr. 2017 a las 21:17
  • tu me ayudarías con esa nueva pregunta ? como la formulo? el 18 abr. 2017 a las 21:19
2

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);
      }
    });
  });
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.