ul li items shuffle random position fade and one by one

Question

I want to make a ui that brands logo in page fadeOut and fadeIn one by one and also change their position, each item should fadeOut every 3 secs and pick a value randomly, now what I tried:

var list = $('ul');
var count = $('ul li').length;

setInterval(function() {
  for (var i = 1; i < count; i++) {
    var j = Math.floor(Math.random() * count);
    $('li', list).eq(j).appendTo(list).fadeIn();
  }
}, 3000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Brands">
  <ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li><a>5</a></li>
    <li><a>6</a></li>
    <li><a>7</a></li>
    <li><a>8</a></li>
    <li><a>9</a></li>
    <li><a>10</a></li>
  </ul>
</div>

In this demo items change position (index) randomly every 3 secs at one time, but problems are: fade not working, I want to fadeOut then fadeIn with new position. Already items change their position in a same time, I want to change randomly, not at a certain time. for example after 5 seconds 2 and 5 change their position together, after 5 seconds 1 and 9 too.

1. Changing position should run randomly not at the same time
2. Also they should fadeOut and fadeIn.

Answer 1

Quite interesting question. I have tried my best to satisfy both requirements. I won't go in depth in text here since I added comments for each of the functions I wrote to satisfy your requirements. Feel free to ask me questions and I will update the answer as requested. JS Fiddle to play if you want: https://jsfiddle.net/xv914c6t/7/

// hash to keep the status for animations
// this is to prevent 2 elements from entering animation at same time
// example if 2 and 5 are being animated we don't animate them
// in the next loop
var elementsStatus = {}

// initialize the hash 
for(var i=0;i<$('ul li').length;i++) {
 // element is not fading/animating
 elementsStatus[i.toString()] = false
}

// utility - swaps 2 nodes in DOM
// https://stackoverflow.com/a/19033868/1861016
function swapNodes(a, b) {
    a = $(a); b = $(b);
    var tmp = $('<span>').hide();
    a.before(tmp);
    b.before(a);
    tmp.replaceWith(b);
};

// utility - random element from array
// https://stackoverflow.com/a/5915122/1861016
function randomElementFromList(items) {
 return items[Math.floor(Math.random()*items.length)];
}

// utility gets random numbers in range
function randomIntFromInterval(min, max) {  
  return Math.floor(Math.random() * (max - min + 1) + min);
}



// searches inside elementsStatus hash to find
// elements that are not animating
// if we find 2 elements we return {index1, index2}
function getElementsForSwap() {
 var notFadingElements = Object.keys(elementsStatus).filter(function(key) { return elementsStatus[key] === false; })
  if(notFadingElements.length < 2) {
   return {}
  }
 var item1 = randomElementFromList(notFadingElements)
  var item2 = randomElementFromList(notFadingElements)
  while(item1 === item2) {
   item2 = randomElementFromList(notFadingElements)
  }
  return {
   index1: item1,
    index2: item2
  }
}

// requirement 1:
// performs animation fadeOut
// after the first element has finished fading out
// we will swap the nodes in DOM
// and fadeIn both elements
function animateAndSwapElements(index1, index2) {
 var list = $('ul');
  var element1 = $('li', list).eq(index1)
  var element2 = $('li', list).eq(index2)
  element1.fadeOut({
   done: function() {
      swapNodes(element1, element2)
      element1.fadeIn({
       done: function() {
       elementsStatus[index1] = false;
        }
      })
    }
  })
  element2.fadeOut({
   done: function() {
      element2.fadeIn({
       done: function() {
       elementsStatus[index2] = false;
        }
      })
    }
  })
}

// requirment 2: performs the animation for 2 elements after random amount of time
function performSwapAfterRandomTime(index1, index2) {
  // this will perform swap of 2 elements with animation
  // after random amount of time.
 setTimeout(function() {
   animateAndSwapElements(index1, index2)
  }, randomIntFromInterval(1000, 3000))
}

// main loop
// search for elements to swap
// and swap them after random amount of time.
setInterval(function() {
 var elementsForSwap = getElementsForSwap()
  // make sure we have something to swap
  // sanity check
  if(elementsForSwap.index1 === undefined || elementsForSwap.index2 === undefined) {
   return;
  }
  // swapping
  elementsStatus[elementsForSwap.index1] = true
  elementsStatus[elementsForSwap.index2] = true
  performSwapAfterRandomTime(elementsForSwap.index1, elementsForSwap.index2)
}, 500);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Brands">
  <ul>
    <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
    <li><a>4</a></li>
    <li><a>5</a></li>
    <li><a>6</a></li>
    <li><a>7</a></li>
    <li><a>8</a></li>
    <li><a>9</a></li>
    <li><a>10</a></li>
  </ul>
</div>