Gabe Rivera Gabe Rivera - 1 month ago 7
CSS Question

Change order element's fadeIn based on their ids

I made a really quick jsFiddle to show my current problem, that I currently do not know how to fix without changing too much of the code.

Currently the problem is that the pictures fade in from left to right according to the order it is displayed in the HTML body. How can I make the images fade in according to the order of the array list and not the way they are currently fading in without changing too much code? I hope this makes sense.



$(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

Here is a working fiddle of what I believe you are looking for.

I first changed display:none to opacity:0 so that the image do not pop in weird when loading them out of order, I then changed the elements to load by their id and their number appended to them.

I then changed the fadeIn method to animate so that it would work with opacity.

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

Working Example:

https://jsfiddle.net/qb2j8w3m/