J'ai fait un très rapide jsFiddle pour montrer mon problème actuel, que je ne sais pas encore comment résoudre sans changer trop de code.
Actuellement, le problème est que les images s'affichent en fondu de gauche à droite selon l'ordre dans lequel elles sont affichées dans le corps du HTML. Comment puis-je faire en sorte que les images s'affichent en fondu selon l'ordre de la liste de tableaux et non de la manière dont elles s'affichent actuellement sans modifier trop de code ? J'espère que cela a un sens.
$(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>