随机移动固定区域的图像

Question

我正在使用此代码在一个区域中随机移动图像.但我总是要展示至少3张图片.这是我做的:

HTML

<div class="fade">Image 1</div>
<div class="fade">Image 2</div>
<div class="fade">Image 3</div>
<div class="fade">Image 4</div>
<div class="fade">Image 5</div>
<div class="fade">Image 6</div>

jQuery的

(function fadeInDiv() {
    var divs = jQuery('.fade');
    var elem = divs.eq(Math.floor(Math.random() * divs.length));
    if (!elem.is(':visible')) {
        elem.prev().remove();
        elem.fadeIn(Math.floor(Math.random() * 1000), fadeInDiv);
    } else {

        elem.fadeOut(Math.floor(Math.random() * 1000), function() {
            elem.before('<div>&nbsp;</div>');
            fadeInDiv();
        });
    }
})();

这个代码随机显示fadein和fadeout图像,结果一次显示2个图像,有时一次显示1个图像.我需要每次使用fadein淡出功能显示3个图像,每个图像有6个图像.

以下是我的主页的样子:

Image1          Image2


       Image3

我希望它看起来像:

       Image1

Image2        Image3

要么

       Image1

       Image2  Image3

或此图像的任何其他模式

Answer 1

尝试使用延迟长度取决于对象随机顺序的递归算法：

window.refresh = function(delay) {
  delay *= 1000;
  var doms = [];
  var randos = [];
  var index = 0;

  function fadeout() {
    if (index < 3) {
      var random = $(doms.get(randos[index]));
      $(random).delay(delay + 200 * index).fadeTo(200, 0, function() {
        $(random).css("visibility", "hidden");
      });
      doms = doms.not(random);
      index++;
      fadeout(doms);
    }
  }

  doms = $('.grid-item');
  doms.css("visibility","visible");
  doms.css("opacity","1");
  var num = Math.floor(Math.random() * doms.length);
  for (var i = 0; i < doms.length; i++) {
    while (randos.indexOf(num) > -1) {
      num = Math.floor(Math.random() * doms.length);
    }
    randos.push(num);
  }
  fadeout();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="grid-item">Image 1</div>
  <div class="grid-item">Image 2</div>
  <div class="grid-item">Image 3</div>
  <div class="grid-item">Image 4</div>
  <div class="grid-item">Image 5</div>
  <div class="grid-item">Image 6</div>
</div>
<br>
<button onclick="refresh(0)">Trigger Animation</button>
<br>
<br>
<input type="number" placeholder="Time in Seconds">
<button onclick="refresh($(this).prev().val())">Trigger Delayed Animation</button>