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

Answer 2

您需要确保按照您的方式对元素进行排序。我根据元素的data = {"productId": "MOBEG4XWJG7F9A6Z", # end of url pid=MOBEG4XWJG7F9A6Z "count": "15", "ratings": "ALL", "reviewerType": "ALL" "sortOrder": "MOST_HELPFUL", "start": "15"} # page number 2添加了sort的示例。
而不是id我使用了display: none选项（以确保元素在屏幕上发生）。

opacity

$(document).ready(function() {
    function scaledTimeout(i) {
        setTimeout(function() {
            $(fadelen[i]).fadeTo(1000, 1);
         }, 1000 * i);
     };

     var elem = $("#fade0, #fade1, #fade2, #fade3, #fade4");
    
     var fadelen = jQuery.makeArray(elem).sort(function(a, b) {
       return $(a).attr('id') > $(b).attr('id');
     });
  debugger;
     for(i = 0; i < fadelen.length; i++) {
        scaledTimeout([i]);
     };
});

a img {
  opacity: 0;
}

Answer 3

你最好只从ID中获取数字，然后根据该数字添加延迟

$(document).ready(function(){
    function scaledTimeout(el, i){
        $(el).delay(1000*i).fadeIn(1000);
    };

    $('[id^=fade]').each(function() {
        scaledTimeout(this, this.id.replace(/\D/g,''));
    });
});

$(document).ready(function(){
    function scaledTimeout(el, i){
        $(el).delay(1000*i).fadeTo(1000, 1);
    };
    
    $('[id^=fade]').each(function() {
    	scaledTimeout(this, this.id.replace(/\D/g,''));
    });
});

img {opacity : 0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<a href="http://shushi168.com/data/out/193/37281782-random-image.png">
  <img id="fade0" style="height:50px;width:50px;" 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;" 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;" 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;" 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;" alt="Random Pic"     src="http://shushi168.com/data/out/193/37281782-random-image.png">
</a>
</body>

Answer 4

这是我认为你正在寻找的工作小提琴。

我首先将display:none更改为opacity:0，以便在按顺序加载图像时不会出现奇怪的图像，然后我将其更改为id加载的元素及其编号附在他们身上。

然后我将fadeIn方法更改为animate，以便它可以使用不透明度。

$("#fade"+i).animate({
    opacity: 1
  },400);

工作示例：

https://jsfiddle.net/qb2j8w3m/

根据其ID更改订单元素的淡入淡出

4 个答案:

工作示例：