背景图像交换动画

Question

我有一个网格，每个div都有一个背景图像。我正在尝试创建淡出/中图像交换效果。目前我正在获得两个随机div并在另一个中插入一个背景图像URL。问题是，过了一会儿所有的图像结束了。我想我每次都需要将后台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

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

你可以解析所有的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 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（）替换，因为你只是在设置新背景时重新添加它。

此外，您将最终获得多个重复项，因为它是随机的。但是你最终只会使用一个网址。如果你不想要多个副本，例如一次超过2个重复项，你需要写一个检查以查看该网址是否被多次使用过，如果是这样，那就得到另一个，直到你得到一个是的。

---

如果你不想重复，你必须一次交换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>