背景图像交换动画

Question

我有一个网格，每个 div 都有一个背景图片。我正在尝试创建淡入淡出 out/in 图像交换效果。目前我得到两个随机 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 是一个的副本，则每次您可能会丢失一个 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 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 。如果您不想要多个重复项，例如一次超过 2 个重复项，则需要写一个检查以查看 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>

背景图像交换动画

Background image swap animation

javascript

random

jquery

fadeout