Question

我有以下代码，当我使用div而不是列表项时，它可以正常工作。但是我无法弄清楚如何按列表项的顺序随机淡入淡出。我使用普通的Javascript和Greensock（TweenMax）来为项目设置动画。

CODEPEN：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());}
 }

非常感谢任何建议！

Answer 1

你的spotAll的选择器不正确。你只是选择外部div。

要解决此问题，只需将spotsAll选择器更改为：

var spotsAll = document.querySelectorAll("#spots li");

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

1 个答案: