¿Cómo evito que la segunda imagen comience a aparecer gradualmente hasta que la primera se haya atenuado por completo?
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 la devolución de llamada fadeIn :
<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>EDITAR
pero, ¿qué es lo que quería agregar más fotos como pic3, pic4, etc.?
Luego, debe crear una función recursiva que usará la devolución de llamada fadeIn hasta que no haya más imágenes.
Te hice un ejemplo en el que el retraso de cada imagen se almacena en un atributo de datos ... por lo que es realmente fácil de usar.
Ver comentarios a lo largo del código.
$(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">