随机淡入和淡出图像，无需重新加载或刷新页面

Question

我被 jquery 卡住了，需要一些帮助

Here is my code:

JQUERY:

var doms = [];
var randos = [];
var index = 0;

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

var selected = $(this);
doms = $('.grid-item');
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();

HTML:

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

此代码随机淡入和淡出图像，但在页面重新加载或刷新时。我需要图像在一段时间后自动淡出而无需任何页面刷新。

FRONTEND:
Actually my output at frontend is like this:

Image1  Image2  Image3

Image4  Image5  Image6

I want it to be in this type of patterns that forms triangle .i.e

Image1           Image3

         Image5

     or

Image1

Image4   Image5

     or
        Image2

image4          Image6

Like so...

Answer 1

    setInterval(function(){ 

       $('#someId').fadeIn();

    }, 3000);

    setInterval(function(){ 

       $('#someId').fadeOut();

    }, 4000);

DEMO

Answer 2

你可以试试

var $doms = $('.grid-item'),
  array = [0, 1, 2];
$doms.slice(3).hide();
setInterval(function() {
  var hide = Math.floor(Math.random() * array.length),
    num;
  $doms.eq(array[hide]).css("visibility", "visible").fadeTo(200, 1);
  array.splice(hide, 1);
  do {
    num = Math.floor(Math.random() * $doms.length);
  } while (hide == num || array.indexOf(num) > -1);
  $doms.eq(num).fadeTo(200, 0, function() {
    $(this).css("visibility", "hidden");
  });
  array.push(num);
}, 500)

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

Answer 3

你可以使用jQuery setInterval function

setInterval(function(){
    alert("Hello");
 }, 3000);