How can I fade images in sequence?

Question

How do I stop the second image from beginning to fade in until the first one has fully faded in?

let pic = $('.oya')
let pic2 = $('.oya1')

$(document).ready(function() {
  pic.hide()
  pic.fadeIn(20000);
  pic2.hide()
  pic2.fadeIn(40000);
})

let nextIndex = index + 1;

if (nextIndex < maxIndex) {
  showImg(nextIndex);
} else {
  location.reload();
}

Louys Patrice Bessette · Answer 1 · 2022-01-31T22:34:21.393

Use the fadeIn callback:

<script>
  let pic = $('.oya')
  let pic2 = $('.oya1')

  $(document).ready(function(){
    pic.hide()
    pic2.hide()

    pic.fadeIn(20000, function(){  // This function executes when fadeIn has completed
      pic2.fadeIn(40000);
    });
 });
</script>

EDIT

but what is i wanted to add more pics like pic3, pic4 and so on...

Then you need to create a recursive function that will use the fadeIn callback until there is no more images.

I made you an example where the delay for each image is stored in a data- attribute... making it really simple to use.

See comments throughout the code.

$(document).ready(function () {
  let timed = $(".timed");
  let maxIndex = timed.length;

  // The function to fade an image in, based on its index
  function showImg(index) {
    // Get the delay from the data attribute
    let delay = parseInt(timed.eq(index).data("time"));
    
    // Just in case you forget about the data-time in the HTML markup
    if (isNaN(delay)) {
      console.clear();
      console.log(`the image at index ${index} has no data-time value.`);
      return;
    }
    
    // Fading in
    console.clear();
    console.log(`Fading in image index ${index} over ${delay}ms`);
    timed.eq(index).fadeIn(delay, function () {
      
      // Using the complete callback, if there are still images to fade in,
      // have anothere recursion with the next index
      let nextIndex = index + 1;
      if (nextIndex < maxIndex) {
        showImg(nextIndex);
      } else {
        console.clear();
        console.log("Finished.");
      }
    });
  }

  // Start the first one
  showImg(0);
});

.timed{
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img class="timed" data-time="4000" src="https://via.placeholder.com/50">
<img class="timed" data-time="2000" src="https://via.placeholder.com/50">
<img class="timed" data-time="500" src="https://via.placeholder.com/50">
<img class="timed" data-time="7000" src="https://via.placeholder.com/50">
<img class="timed" data-time="3500" src="https://via.placeholder.com/50">

CodePen

Hello thanks this works perfect, but what is i wanted to add more pics like pic3, pic4 and so on, but only want them to start loading after the previous one has loaded. i.e. pic3 only start after pic2 and pic4 after pic3. thank you for your assistance — Del Noi, Jan 31 '22 at 18:23
That is way more complicated... But I edited with a solution for you to study ;) — Louys Patrice Bessette, Jan 31 '22 at 22:29
Thank for all your assistance you this works super. please final question, when it gets to the last image, how to make it hold for a set time and start again from beginning. I tinkered with the if,else statement at the end and change it to the edit above. essentially i used the location.reload(); which pretty much does the same thing, but was hoping there is a more elegant solution to this — Del Noi, Feb 01 '22 at 14:22
@DelNoi, please don't ask new questions in comments. That's known as "moving the goalposts". See [ask] and post a new question, or revise yours above. — isherwood, Feb 01 '22 at 14:36
That is simple. In the `else`, just hide all the images and restart the thing: `$(".timed).hide(); showImg(0);` — Louys Patrice Bessette, Feb 01 '22 at 14:49

How can I fade images in sequence?

1 Answers1