3 votes

Modifier le fadeIn des éléments de l'ordre en fonction de leur id.

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>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X