Поскольку вы изменяете 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)];
Демо
Примечание: вам не нужно заменять url (), поскольку вы просто добавляете его обратно при установке нового фона.
Кроме того, вы получите несколько дубликатов, поскольку они случайные. Но у вас не будет только одного URL. Если вы не хотите, чтобы несколько дубликатов, например, более двух дубликатов за раз, вам нужно будет написать проверку, чтобы увидеть, не использовался ли этот 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, чтобы случайно не запустить новый переход, пока он уже происходит.