Skip to main content
Cambio por mejor comprensión del problema.
Origen Enlace
delCano
  • 494
  • 2
  • 9

Voy a formular mis comentarios en una respuesta que creo será más cómoda de ver.

El problema está únicamente en la función animación, que debe llevar al paso correcto y actualmente activa todos de golpe. Yo la cambiaría a:

function animacion(caso){
  var pixels = (caso * 250) + "px";

  $(".progressbar li.active").removeClass("active");
  
  $( ".cartanime" ).animate({ "left": pixels }, "slow" ,function(){
    for(var i = 1; i <= caso; i++) {
       $(`.progressbar li:nth-child(${casoi})`).addClass("active");  
    }
  });
};

Voy a formular mis comentarios en una respuesta que creo será más cómoda de ver.

El problema está únicamente en la función animación, que debe llevar al paso correcto y actualmente activa todos de golpe. Yo la cambiaría a:

function animacion(caso){
  var pixels = (caso * 250) + "px";

  $(".progressbar li.active").removeClass("active");
  
  $( ".cartanime" ).animate({ "left": pixels }, "slow" ,function(){
    $(`.progressbar li:nth-child(${caso})`).addClass("active");  
  });
};

Voy a formular mis comentarios en una respuesta que creo será más cómoda de ver.

El problema está únicamente en la función animación, que debe llevar al paso correcto y actualmente activa todos de golpe. Yo la cambiaría a:

function animacion(caso){
  var pixels = (caso * 250) + "px";

  $(".progressbar li.active").removeClass("active");
  
  $( ".cartanime" ).animate({ "left": pixels }, "slow" ,function(){
    for(var i = 1; i <= caso; i++) {
       $(`.progressbar li:nth-child(${i})`).addClass("active");  
    }
  });
};

Origen Enlace
delCano
  • 494
  • 2
  • 9

Voy a formular mis comentarios en una respuesta que creo será más cómoda de ver.

El problema está únicamente en la función animación, que debe llevar al paso correcto y actualmente activa todos de golpe. Yo la cambiaría a:

function animacion(caso){
  var pixels = (caso * 250) + "px";

  $(".progressbar li.active").removeClass("active");
  
  $( ".cartanime" ).animate({ "left": pixels }, "slow" ,function(){
    $(`.progressbar li:nth-child(${caso})`).addClass("active");  
  });
};