Перекрестное затухание сетки из 6 изображений в случайном порядке, одно за другим. ⇐ Jquery

[Anonymous]

Со вчерашнего дня я пытался сделать что-то посложнее (думаю).
Я пытаюсь сделать именно то, что происходит здесь: https://tympanus.net /Development/AnimatedResponsiveImageGrid/index2.html но этому скрипту 8 лет и он не может работать с более новым jQuery, в любом случае я хотел переделать его самостоятельно.
То, что мне нужно (ну, чего от меня хочет маркетинг):
Наличие сетки из 6 изображений, которые случайным образом переходят в другое изображение, но одно за другим. Они никогда не должны повторяться.
Пока я так и сделал, но все кроссфейды сделаны 6 на 6. Я хочу делать это одно за другим в случайном порядке.
HTML

Код: Выделить всё

[img]https://picsum.photos/210?image=0[/img]
[img]https://picsum.photos/210?image=11[/img]
[img]https://picsum.photos/210?image=21[/img]
[img]https://picsum.photos/210?image=31[/img]
[img]https://picsum.photos/210?image=41[/img]
[img]https://picsum.photos/210?image=51[/img]
[img]https://picsum.photos/210?image=61[/img]
[img]https://picsum.photos/210?image=71[/img]
[img]https://picsum.photos/210?image=81[/img]
[img]https://picsum.photos/210?image=91[/img]
[img]https://picsum.photos/210?image=101[/img]
[img]https://picsum.photos/210?image=111[/img]
[img]https://picsum.photos/210?image=121[/img]
[img]https://picsum.photos/210?image=131[/img]
[img]https://picsum.photos/210?image=141[/img]
[img]https://picsum.photos/210?image=151[/img]
[img]https://picsum.photos/210?image=161[/img]
[img]https://picsum.photos/210?image=171[/img]
[img]https://picsum.photos/210?image=181[/img]
[img]https://picsum.photos/210?image=191[/img]



[img]https://placekitten.com/210/210?image=1[/img]
[img]https://placekitten.com/210/210?image=2[/img]
[img]https://placekitten.com/210/210?image=3[/img]
[img]https://placekitten.com/210/210?image=4[/img]
[img]https://placekitten.com/210/210?image=5[/img]
[img]https://placekitten.com/210/210?image=6[/img]

JS

Код: Выделить всё

$( document ).ready(function() {
var ids = [];

function initArray() {
$(".img-bank img").each(function() {
ids.push($(this).attr("src"));
})
}

function randomArray() {
// copie du tableau d'ids car il va etre modifié
var tempIds = ids.slice();
// init du tableau de resultat
var myIds = [];
for (var i = 0; i < 6;  i++) {
// Recupere un int random
var randomId = (Math.floor(Math.random() * tempIds.length) + 1);
// Recupere la valeur random
var myId = tempIds[randomId - 1];
// Ajout de la valeur random au tableau de resultat
myIds.push(myId);
// Recupere l'index de la valeur random pour la suppression
var pos = tempIds.indexOf(myId);
// Suppression de la valeur choisie pour eviter de retomber dessus
tempIds.splice(pos, 1);
}
return myIds;
}

initArray();

function changeSrc() {
var result = randomArray();
$(".galery img:hidden").each(function(index) {
$(this).attr("src", result[index]);
});
$(".galery img").fadeToggle(1500);
}

setInterval(function() {
changeSrc();
}, 2000);

});

МЕНЬШЕ

Код: Выделить всё

.galery {
margin-top: 30px;
.row > div {
position:relative;
height: 240px;
width: 240px;
img {
position: absolute;
top: 0;
left: 15;
}
}
}

https://jsfiddle.net/N_3G/ju0comn2/
Может кто-нибудь помочь мне с этим, пожалуйста?

Подробнее здесь: https://stackoverflow.com/questions/530 ... one-by-one