On page load, the same random background image is applied to all $("#image").siblings from an array of images defined under var images =.
On ('.image').mouseenter the targeted image fades out, and the next image from the array is loaded, before fading back in. I would like each image to move through the list of images in the array independently, irrespective of other image changes.
E.g. On page load, all images load as the same random image, PK1.jpg. I hover on the image in the first div, which fades out and fades back in as PK2.jpg. I then hover on the image in the second div, which fades out and also fades back in as PK2.jpg (instead of PK3.jpg which it does currently).
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>