Animation Jquery reboot

Question

I am having problems with my jquery animations, after submitting the form when performing the submit action, I want to chain the animation back to step 1, but I can't do it, and when I want to go to step 2 the bar appears again progress progress .. I am not finding my fault, I leave my code pen, with the styles and the form to see if they can lend a hand

    function nextBackFormulario(boton,primerFormulario,segundoFormulario,valorPrimario,valorSecundario){
    boton.on("click", () => {
    primerFormulario.animate({marginLeft: valorPrimario});
    segundoFormulario.animate({marginLeft: valorSecundario});
})
}

function finalizarForm(boton,primerFormulario,segundoFormulario,tercerFormulario,cuartoFormulario,quintoFormulario,valorPrimario,valorSecundario,valorWidth,){
    boton.on("click", () => {
    primerFormulario.animate({marginLeft: valorPrimario});
    segundoFormulario.animate({marginLeft: valorSecundario});
    tercerFormulario.animate({marginLeft: valorSecundario});
    cuartoFormulario.animate({marginLeft: valorSecundario});
    quintoFormulario.animate({marginLeft: valorSecundario});
    $('.progreso').css({width: valorWidth})
    $('.circulo:not(:first)').toggleClass('activo')
    $('.fas:not(:first)').toggleClass('activado')
    $('#formSimulador').trigger("reset");
})
}

//primer paso
nextBackFormulario($("#siguiente1"), $("#bienvenida"),$("#datosPersonales"),'-105%','0%')
nextBackFormulario($("#anterior0"), $("#bienvenida"),$("#datosPersonales"),'0%','105%')

//segundo paso
nextBackFormulario($("#siguiente2"), $("#datosPersonales"),$("#datosLaborales"),'-105%','0%')
nextBackFormulario($("#anterior1"), $("#datosPersonales"),$("#datosLaborales"),'0%','105%')

//tercer paso
nextBackFormulario($("#siguiente3"), $("#datosLaborales"),$("#datosPrestamo"),'-106%','0%')
nextBackFormulario($("#anterior2"), $("#datosLaborales"),$("#datosPrestamo"),'0%','106%')

//ultimo paso
nextBackFormulario($(".botonCalc"), $("#datosPrestamo"),$("#finalizacionSimulador"),'-105%','0%')
finalizarForm($("#botonEnviar"), $("#bienvenida"),$("#datosPersonales"),$("#datosLaborales"),$("#datosPrestamo"),$("#finalizacionSimulador"),'0%','0%','0%')

https://codepen.io/kamp3r/pen/XWgEKvB

JC Cavalca · Answer 1 · 2021-09-19T06:45:48.347

0

Use data-al_paso in button with id "siguente", don't suffix id with a number. Add suffix on the class "circulo". So you can get the "circulo" on the click of the button "singuiente" thanks to the data-al_paso.

// example circulo hmtl
<div class="circulo-1"><i class="fas fa-money-check-alt"></i></div>
<div class="circulo-2 "><i class="fas fa-hand-holding-usd"></i></div>
etc...

// example siguente
<button data-paso="1" data-al_paso="2" class="siguiente"  type="button">Siguiente</button>

$('.siguente').on('click', function(e) {
   var index = $(this).data('al_paso');
   $('.circulo-' + index).addClass('activo');
});

edited Sep 19 '21 at 06:45

answered Sep 18 '21 at 21:21

JC Cavalca

146
8

You can brigme a example of this attr? – Martan Sep 18 '21 at 22:36
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 18 '21 at 22:56

Animation Jquery reboot

1 Answers1