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