Javascript 背景图像交换动画

我有一个网格，每个div都有一个背景图像。我正在尝试创建淡出/进入图像交换效果。目前，我得到两个随机div，并将一个背景图像URL插入另一个。问题是，过了一段时间，所有的图像都是一样的。我想我每次都需要将背景URL重置为原始值（图像），但我不知道该怎么做

因此，顺序是： 原始图像淡出， 新形象淡出， 新形象淡出， 原始图像淡入淡出

非常感谢您的帮助

目前我有：

JS:

HTML:

---

由于您是在随机元素中更改背景图像url，因此如果另一个url是另一个url的副本，则每次都可能会丢失该url

您可以解析所有URL并将它们保存在一个数组中，并从该数组中随机获取URL，而不是元素本身，因为您将更改元素

var $squares = $('.box');
//create an array from all the backgroundImage values
var urls = $squares.map(function(){
  return this.style.backgroundImage;
});

然后在imgFade

var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)])
//get random urls from the array instead of the elements
var square1Url = urls[Math.floor(Math.random()*$squares.length)];
var square2Url = urls[Math.floor(Math.random()*$squares.length)];

---

演示

var$squares=$（'.box'）；
var url=$squares.map（函数（）{
返回此.style.backgroundImage；
});
函数imgFade（）{
var square1=$squares.eq（[Math.floor（Math.random（）*$squares.length）]）
var square1Url=url[Math.floor（Math.random（）*$squares.length）]；
var square2Url=url[Math.floor（Math.random（）*$squares.length）]；
$（平方1）.fadeOut（1500，函数（）{
$（this.css（“背景图像”，square2Url）；
美元（本）.fadeIn（1500）；
});
timeoutId=setTimeout（imgFade，1500）；
}
imgFade（）
正文{
保证金：0
}
.网格容器{
宽度：100%；
}
.盒子{
宽度：20vw；
高度：33.33vh；
浮动：左；
边框：1px纯白；
背景尺寸：封面；
背景位置：中心；
}

谢谢您的帮助。有多个副本是问题的一部分，我认为通过将图像返回到其原始url，我在任何给定时间都不应该有超过2个副本。我有点困惑，我该如何检查url是否被多次使用？@patrice see编辑了答案。添加了一种不需要复制的方法，但需要同时制作两个图像，而不是一个。这太棒了！事实上，一次两个淡出效果更好。非常感谢。
body {margin:0}
.grid-container {width:100%;}

.box {
width:20vw;
height:33.33vh;
float:left;
border:1px solid white;
background-size: cover;
background-position:center;
}

var $squares = $('.box');
//create an array from all the backgroundImage values
var urls = $squares.map(function(){
  return this.style.backgroundImage;
});

var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)])
//get random urls from the array instead of the elements
var square1Url = urls[Math.floor(Math.random()*$squares.length)];
var square2Url = urls[Math.floor(Math.random()*$squares.length)];