Al cargar la página, se aplica la misma imagen de fondo aleatoria a todos los $("#image").siblings de una matriz de imágenes definida en var images = .
En ('.image').mouseenter , la imagen de destino se desvanece y se carga la siguiente imagen de la matriz, antes de volver a aparecer. Me gustaría que cada imagen se moviera a través de la lista de imágenes en la matriz de forma independiente, independientemente de otras cambios de imagen
Por ejemplo, al cargar la página, todas las imágenes se cargan como la misma imagen aleatoria, PK1.jpg. Paso el cursor sobre la imagen en el primer div , que se desvanece y vuelve a aparecer como PK2.jpg. Luego coloco el cursor sobre la imagen en el segundo div , que se desvanece y también se desvanece como PK2.jpg (en lugar de PK3.jpg, como ocurre actualmente).
var images = ['PK1.jpg', 'PK2.jpg', 'PK3.jpg', 'PK4.jpg', 'PK5.jpg', 'PK6.jpg', 'PK7.jpg', 'PK8.jpg', 'PK9.jpg', 'PK10.jpg', 'PK11.jpg', 'PK12.jpg', 'PK13.jpg', 'PK14.jpg', 'PK15.jpg', 'PK16.jpg', 'PK17.jpg', 'PK18.jpg', 'PK19.jpg', 'PK20.jpg']; $("#image").each(function() { $(this).siblings().css({ 'background-image': 'url(assets/' + images[Math.floor(Math.random() * images.length)] + ')' }); }); $(".image").each(function() { $(this).data('own', images) images.push(images.shift()); }); //Images Fade Out/In $('.image').mouseenter(function() { var $element = $(this); $element.addClass("hide"); setTimeout(function() { var own = $element.data('own'); var next = own.shift(); own.push(next); $element.css({ 'background-image': 'url(assets/' + next + ')' }); }, 1000); setTimeout(function() { $element.removeClass('hide'); }, 4000); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section id="grid" class="desktop-image"> <div class="image-grid"> <div id="image" class="image"></div> <div id="image" class="image"></div> <div id="image" class="image"></div> <div id="image" class="image"></div> </div> </section>