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

I want to orperate this if sentences in order, but it doesn't work. Four photos are fading in and fading out simultaneously, and I want to make it orderly. How to fix this problem? I guess setInerval or setTimeout might be the solutions, but I don't know how to do. Please Help!

CodePudding user response：

All the if statements are working sequentially but the thing is that it is so fast it seems to be fading simultaneously.

To solve that, in the if statement, you can add the setTimeout() function, and provide the if statement inside the function

setTimeout(()=>{
    // your next if statement goes here
}, 1000);

Here, a timeOut of 1 sec is given (1000ms).

We do this as setTimeout() is a callback function and if you only give the empty timeout inside the if statement, it will move forward in code.

The nesting of your if statements will look like this:-

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

Another way to do this can make this a bit simpler to look:-

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

It is the same thing but we are not nesting the code blocks and setting delay in the timeout to be more each time

///////EDIT///////
You could change the id of animations like #main_photo_animation_4 instead of #main_photo_animation_four and use the simpler code:-

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

This will now work for any number of images

CodePudding user response：

You can use 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();
          });
      });
  })
}

Use jquery's promise():

function fade_slider(a) {
  return $(a).fadeIn(4000).fadeOut(4000).promise();
}