fadeto - jquery slidetoggle and fade in

JQuery fadeIn recibe dos llamadas después de fadeOut

Question

La situación: tengo 8 diapositivas. Cuando la página comienza, todos están ocultos excepto el inicial, cuando se hace clic en el primero, se desvanece y luego 3 más se desvanecen en uno tras otro, cuando 3 están allí, se desvanecen (el número máximo que cabe es 3) y luego se desvanece los siguientes 3, después de eso los escondo y me desvanezco. El último que queda. El resultado y la animación están bien, pero tengo el problema de que después del desvanecimiento de todas las diapositivas, el siguiente fadeIn recibe dos llamadas y atornilla el aspecto general de la animación. Intenté muchas cosas, el método de parada, escribirlo con hide y otras cosas, ¿qué podría causar el problema?

El código para jquery:

$(".slide_top").click(function () {
animacija_init();
});
var kadras;
var laikmatis;
function animacija_init() {
kadras = 1;
$(".slide_top").fadeOut(500);
animacija_trigger();
}
function animacija_trigger() {
if(kadras == 1) {
$(''.slide.one'').delay(500).fadeIn("slow");
console.log("1");
}
if(kadras == 2) {
$(''.slide.two'').fadeIn("slow");
console.log("2");
}
if(kadras == 3) {
$(''.slide.three'').fadeIn("slow");
console.log("3");
}
if(kadras == 4) {
$(''.slide'').fadeOut(300, function() {
$(''.slide.four'').delay(100).fadeIn("slow");
console.log("4");
});
}
if(kadras == 5) {
$(''.slide.five'').fadeIn("slow");
console.log("5");
}
if(kadras == 6) {
$(''.slide.six'').fadeIn("slow");
console.log("6");
}
if(kadras == 7) {
$(''.slide'').fadeOut(300, function() {
$(''#last_slide'').delay(300).fadeIn("slow");
console.log("7");
});
}
kadras++;
laikmatis = setTimeout(''animacija_trigger()'', 2500);
if(kadras == 8) {
baigti_animacija();
}
}
function baigti_animacija() {
clearTimeout(laikmatis);
}

¿Algún consejo? ejemplo en vivo aquí: www.iamrokas.com/demo_boxi Console.log se usa para verificar cuándo comienza el evento

¡Gracias!

Answer 1

Me tomó un tiempo darme cuenta de esto. El problema es que la función completa de $(''.slide'').fadeOut se dispara varias veces porque hay varios DOM con clase = diapositiva !!

1) Use el método promise() para ejecutar la función completa solo una vez. Echa un vistazo a la JSFIDDLE que he creado para ti. Verá que cada número se imprime solo una vez en la consola en lugar de 8 veces.

2) Agregué una length variable global para modificar dinámicamente el tiempo que debe transcurrir antes de la próxima animación.

3) Tenga en cuenta que el orden de ejecución no es secuencial, como cabría esperar. Piensa en todo lo que se ejecuta simultáneamente. Es importante tener en cuenta que la length se asigna antes de la función setTimeout .

Utilicé esta función Execute complete de referencia solo una vez .