ul li items shuffle random position fade and one by one

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.