背景图片交换动画

Question

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

因此顺序为： 原始图像逐渐淡出， 新的图像淡入， 新图像逐渐淡出， 原始图像逐渐淡入

任何帮助都将不胜感激！

目前我有这个fiddle：

JS：

var $squares = $('.box');

function imgFade() {

var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)])
var square2 = $squares.eq([Math.floor(Math.random()*$squares.length)])

var square1Url = square1.css('background-image').replace(/(url\(|\)|")/g, '');
var square2Url = square2.css('background-image').replace(/(url\(|\)|")/g, '');

$(square1).fadeOut(1500, function() {
$(this).css("background-image", "url(" + square2Url + ")");
$(this).fadeIn(1500);
});

timeoutId = setTimeout(imgFade, 1500);
}

imgFade();  

HTML：

<div class="grid-container">

<div class="box" style="background-image: url('https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg')"></div>

<div class="box" style="background-image: url('https://r.hswstatic.com/w_907/gif/tesla-cat.jpg')"></div>

<div class="box" style="background-image: url('https://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg')"></div>

<div class="box" style="background-image: url('https://www.shelterluv.com/sites/default/files/animal_pics/464/2016/11/25/22/20161125220040.png')"></div>

<div class="box" style="background-image: url('https://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_66/cw_288/ch_162/APL/uploads/2014/10/cat_5-1.jpg')"></div>

<div class="box" style="background-image: url('https://cdn.theatlantic.com/assets/media/img/mt/2017/06/shutterstock_319985324/lead_720_405.jpg?mod=1533691890')"></div>

</div>

CSS：

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;
}

Answer 1

由于您是在随机元素中更改背景图片网址，因此，如果另一个网址是其他网址的副本，则每次可能会丢失一个网址。

您可以解析所有网址并将其保存在一个数组中，然后从该数组而不是元素本身中随机获取这些网址，因为您将要更改元素。

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 urls = $squares.map(function() {
  return this.style.backgroundImage;
});

function imgFade() {

  var square1 = $squares.eq([Math.floor(Math.random() * $squares.length)])

  var square1Url = urls[Math.floor(Math.random() * $squares.length)];
  var square2Url = urls[Math.floor(Math.random() * $squares.length)];

  $(square1).fadeOut(1500, function() {
    $(this).css("background-image", square2Url);
    $(this).fadeIn(1500);
  });

  timeoutId = setTimeout(imgFade, 1500);
}

imgFade();

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">

  <div class="box" style="background-image: url('https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg')">

  </div>

  <div class="box" style="background-image: url('https://r.hswstatic.com/w_907/gif/tesla-cat.jpg')">
  </div>

  <div class="box" style="background-image: url('https://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg')">
  </div>

  <div class="box" style="background-image: url('https://www.shelterluv.com/sites/default/files/animal_pics/464/2016/11/25/22/20161125220040.png')">
  </div>

  <div class="box" style="background-image: url('https://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_66/cw_288/ch_162/APL/uploads/2014/10/cat_5-1.jpg')">
  </div>

  <div class="box" style="background-image: url('https://cdn.theatlantic.com/assets/media/img/mt/2017/06/shutterstock_319985324/lead_720_405.jpg?mod=1533691890')">
  </div>

</div>

---

请注意，您不需要进行url（）替换，因为您只是在设置新背景时才将其重新添加。

此外，由于它是随机的，因此您将获得多个重复项。但是您最终不会只使用一个URL。如果您不希望有多个重复项，例如一次不超过两个重复项，则需要编写检查以查看该URL是否已被多次使用，如果是，则获取一个不同的URL，直到获得一个没有被使用过的URL。没来过。

---

如果您根本不希望重复，则必须一次交换2个背景，而不是一次仅交换一个。这在代码方面会更容易一些，但确实需要一次更改两个。

在这一步中，您将像以前一样做，但还要将更改添加到第二个元素中

var square1 = $squares.eq([Math.floor(Math.random()*$squares.length)])
//modified to not select square1
var square2 =   var square2 = $squares.not(square1).eq([Math.floor(Math.random() * $squares.length-1)])

var square1Url = square1.css('background-image').replace(/(url\(|\)|")/g, '');
var square2Url = square2.css('background-image').replace(/(url\(|\)|")/g, '');

$(square1).fadeOut(1500, function() {
  $(this).css("background-image", "url(" + square2Url + ")");
  $(this).fadeIn(1500);
});
$(square2).fadeOut(1500, function() {
  $(this).css("background-image", "url(" + square1Url + ")");
  $(this).fadeIn(1500);
});

您还需要将超时时间增加到3000，以免在已经发生新的过渡时意外触发新的过渡。

---

var $squares = $('.box');
var urls = $squares.map(function() {
  return this.style.backgroundImage;
});

function imgFade() {

  var square1 = $squares.eq([Math.floor(Math.random() * $squares.length)])
  //modified to make sure we dont accidently
  //select square1
  var square2 = $squares.not(square1).eq([Math.floor(Math.random() * $squares.length-1)])
  var square1Url = square1.css('background-image');
  var square2Url = square2.css('background-image');

  $(square1).fadeOut(1500, function() {
    $(this).css("background-image", square2Url);
    $(this).fadeIn(1500);
  });
  $(square2).fadeOut(1500, function() {
    $(this).css("background-image", square1Url)
    $(this).fadeIn(1500);
  });
  //change timing so it doesnt get called
  //in the middle of a transition
  timeoutId = setTimeout(imgFade, 3000);
}

imgFade();

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">

  <div class="box" style="background-image: url('https://www.catster.com/wp-content/uploads/2017/11/A-Siamese-cat.jpg')">

  </div>

  <div class="box" style="background-image: url('https://r.hswstatic.com/w_907/gif/tesla-cat.jpg')">
  </div>

  <div class="box" style="background-image: url('https://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg')">
  </div>

  <div class="box" style="background-image: url('https://www.shelterluv.com/sites/default/files/animal_pics/464/2016/11/25/22/20161125220040.png')">
  </div>

  <div class="box" style="background-image: url('https://r.ddmcdn.com/w_830/s_f/o_1/cx_0/cy_66/cw_288/ch_162/APL/uploads/2014/10/cat_5-1.jpg')">
  </div>

  <div class="box" style="background-image: url('https://cdn.theatlantic.com/assets/media/img/mt/2017/06/shutterstock_319985324/lead_720_405.jpg?mod=1533691890')">
  </div>

</div>