如何随机显示列表项的顺序?

我有下面的代码,当我使用div而不是listitem时,它可以工作。然而,我不知道如何按照列表项的顺序随机淡出。 我使用普通的Javascript和Greensock(TweenMax)来制作项目的动画。

代码笔: http://codepen.io/dada78/pen/fd4f35272d48df628148f98c4a9e5459/

在我的HTML中,我有:

 <div id="spots">
      <ul>
        <li class="square"></li>
        <li class="square"></li>
        <li class="circle"></li>
        <li class="square"></li>
        <li class="square"></li>
        <li class="circle"></li>
    </ul>
 </div>

在我的Javascript中: var spotsAll=document.querySelectorAll(“#spots”);

 var tl = new TimelineMax(); 
 tl
   .set(spotsAll, {autoAlpha:0})
   .add(spotsIn);

 function spotsIn()
 {
  var spotsArray = [0, 1, 2, 3, 4, 5, 6];
  for(var i = 0; i < spotsArray.length; i++){
    tl.to(spotsAll[i], 0.5, {autoAlpha:1, ease: Back.easeOut.config(1.8)}, Math.random());}
 }

非常感谢您的建议!