function FadeAnimation(){ $(document).ready(function(){ let delay= 8000; var num = 0; if(num % 4 == 0){ fade_slider('#eclipse_1'); fade_slider('#main_photo_animation_one'); num++; setTimeout(()=>{ if(num % 4 == 1){ fade_slider('#eclipse_2'); fade_slider('#main_photo_animation_two'); num++; setTimeout(()=>{ if(num % 4 == 2){ fade_slider('#eclipse_3'); fade_slider('#main_photo_animation_three'); num++; setTimeout(()=>{ if(num % 4 == 3){ fade_slider('#eclipse_4'); fade_slider('#main_photo_animation_four'); num++; } }); } }, delay); } }, delay); } FadeAnimation(); })}; function fade_slider(a){ $(document).ready(function(){ $(a).fadeIn(4000); $(a).fadeOut(4000); }) }Quiero operar esto si las oraciones están en orden, pero no funciona. Cuatro fotos se desvanecen y se desvanecen simultáneamente, y quiero que sea ordenado. ¿Cómo arreglar este problema? Supongo que setInerval o setTimeout podrían ser las soluciones, pero no sé cómo hacerlo. ¡Por favor ayuda!
Todas las sentencias if funcionan secuencialmente, pero la cuestión es que es tan rápido que parece desvanecerse simultáneamente.
Para resolver eso, en la declaración if, puede agregar la función setTimeout() y proporcionar la declaración if dentro de la función
setTimeout(()=>{ // your next if statement goes here }, 1000);Aquí, se da un timeOut de 1 segundo (1000ms).
Hacemos esto porque setTimeout() es una función de devolución de llamada y si solo proporciona el tiempo de espera vacío dentro de la instrucción if, avanzará en el código.
El anidamiento de sus sentencias if se verá así:
let delay=1000; // setting value for timeout in ms if(num % 4 == 0){ fade_slider('#eclipse_1'); fade_slider('#main_photo_animation_one'); num++; setTimeout(()=>{ if(num % 4 == 1){ fade_slider('#eclipse_2'); fade_slider('#main_photo_animation_two'); num++; setTimeout(()=>{ if(num % 4 == 2){ fade_slider('#eclipse_3'); fade_slider('#main_photo_animation_three'); num++; setTimeout(()=>{ if(num % 4 == 3){ fade_slider('#eclipse_4'); fade_slider('#main_photo_animation_four'); num++; } }); } }, delay); } }, delay); }Otra forma de hacer esto puede hacer que esto sea un poco más simple de ver:
let delay=1000; setTimeout(()=>{ if(num % 4 == 0){ fade_slider('#eclipse_1'); fade_slider('#main_photo_animation_one'); num++; } }, delay); setTimeout(()=>{ if(num % 4 == 1){ fade_slider('#eclipse_2'); fade_slider('#main_photo_animation_two'); num++; } }, delay*2); setTimeout(()=>{ if(num % 4 == 2){ fade_slider('#eclipse_3'); fade_slider('#main_photo_animation_three'); num++; } }, delay*3); setTimeout(()=>{ if(num % 4 == 3){ fade_slider('#eclipse_4'); fade_slider('#main_photo_animation_four'); num++; } }, delay*4);Es lo mismo, pero no estamos anidando los bloques de código y configurando la demora en el tiempo de espera para que sea más cada vez.
///////EDITAR///////
Puede cambiar la identificación de animaciones como #main_photo_animation_4 en lugar de #main_photo_animation_four y usar el código más simple: -
let i; let num_pictures=4; let delay=1000; for(i=1;i<=num_pictures;i++){ setTimeout(()=>{ if(num % num_pictures == i){ fade_slider('#eclipse_'+i); fade_slider('#main_photo_animation_'+i); num++; } }, delay*i); }Esto ahora funcionará para cualquier número de imágenes.
Puedes usar Promise , async/await
$(document).ready(function(){ FadeAnimation(); }) async function FadeAnimation() { await fade_slider('#eclipse_1'); await fade_slider('#main_photo_animation_one'); await fade_slider('#eclipse_2'); await fade_slider('#main_photo_animation_two'); await fade_slider('#eclipse_3'); await fade_slider('#main_photo_animation_three'); await fade_slider('#eclipse_4'); await fade_slider('#main_photo_animation_four'); } function fade_slider(a) { return new Promise((resolve, reject) => { $(a).fadeIn(4000, () => { $(a).fadeOut(4000, () => { resolve(); }); }); }) } Usa la promise() :
function fade_slider(a) { return $(a).fadeIn(4000).fadeOut(4000).promise(); }