javascript - 根据其 id 更改顺序元素的淡入

Question

我制作得非常快 jsFiddle展示我当前的问题，我目前不知道如何在不更改太多代码的情况下修复。

目前的问题是图片根据它在 HTML 正文中的显示顺序从左到右淡入。如何在不更改太多代码的情况下使图像根据数组列表的顺序淡入而不是它们当前淡入的方式？我希望这是有道理的。

$(document).ready(function() {
    function scaledTimeout(i) {
        setTimeout(function() {
            $(fadelen[i]).fadeIn(1000);
         }, 1000 * i);
     };

     var elem = document.querySelectorAll("#fade0, #fade1, #fade2, #fade3, #fade4");
     var fadelen = jQuery.makeArray(elem);
     for(i = 0; i < fadelen.length; i++) {
        scaledTimeout([i]);
     };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://shushi168.com/data/out/193/37281782-random-image.png">
    <img id="fade0" style="height:50px;width:50px;display:none;" alt="Random Pic" src="http://shushi168.com/data/out/193/37281782-random-image.png">
</a>
<a href="http://shushi168.com/data/out/193/37281782-random-image.png">
    <img id="fade2" style="height:50px;width:50px;display:none;" alt="Random Pic" src="http://shushi168.com/data/out/193/37281782-random-image.png">
</a>
<a href="http://shushi168.com/data/out/193/37281782-random-image.png">
    <img id="fade1" style="height:50px;width:50px;display:none;" alt="Random Pic" src="http://shushi168.com/data/out/193/37281782-random-image.png">
</a>
<a href="http://shushi168.com/data/out/193/37281782-random-image.png">
    <img id="fade4" style="height:50px;width:50px;display:none;" alt="Random Pic" src="http://shushi168.com/data/out/193/37281782-random-image.png">
</a>
<a href="http://shushi168.com/data/out/193/37281782-random-image.png">
    <img id="fade3" style="height:50px;width:50px;display:none;" alt="Random Pic" src="http://shushi168.com/data/out/193/37281782-random-image.png">
</a>

Answer 1

querySelectorAll 收集元素不是根据它们在函数中的顺序，而是根据它们在 DOM 中的顺序。

---

这是工作代码，您可以在其中根据数组中的顺序收集元素:

$(document).ready(function() {
  var selectors = "#fade0,#fade1,#fade2,#fade3,#fade4".split(',');

  function scaledTimeout(i) {
    setTimeout(function() {
      $(selectors[i]).fadeIn(1000);
    }, 1000*i);
  };

  for(i = 0; i < selectors.length; i++) {
    scaledTimeout([i]);
  };
});

JSFiddle