J'essaie simplement de comprendre comment parcourir des éléments avec la même classe et les animer un par un. J'ai pensé que la boucle fonctionnerait, mais je ne comprends pas pourquoi elle ne fonctionnerait pas.

$(document).ready(function() {
    var index = 0;
    var images = $('.image');

    while (index < images.length) {
        var image = images[index];
        image.animate({
            opacity: "1"
        }, 1000, function() {
            index++;
        });
    };
});

Voici le violon

1
wishiwasabigdataguy 17 juil. 2015 à 21:14

5 réponses

Meilleure réponse

Il s'agit d'une implémentation simple de ce que @Evert explique avec brio dans une autre réponse.

Citant leur réponse ici

index ++ est appelé dans un rappel qui est exécuté après l'animation. L'animation ne démarre que lorsque ce script a cessé de s'exécuter.

Pour cette raison, index ++ n'est jamais exécuté et la boucle ne se termine jamais.

Vous devez réécrire ceci en tant que fonction récursive. Le gestionnaire d'événements qui appelle désormais index ++ doit en fait être responsable de la configuration de la prochaine animation.

La mise en œuvre peut être quelque chose comme ça

var index = 0;
var images = $('.image');
animate(images);

function animate() {
    var image = images.eq(index);
    image.animate({
        opacity: "1"
    }, 1000, function () {
        index++;
        animate();
    });
}

Démonstration https://jsfiddle.net/dhirajbodicherla/w4cgctyk/2/

8
Community 23 mai 2017 à 12:17

Pourquoi ne pas simplement utiliser la fonction jQuery each?

var images = $('.image');

$.each(images,function(){
    $(this).animate({
        opacity:"1"
    }, 1000, function(){
        index++;
    });
 });
-1
Jammidd 17 juil. 2015 à 18:22

Votre logique va mal à index++; Vous devriez avoir une fonction récursive. Vous devez incrémenter la valeur de index dans la fonction récursive.

function YourRecusiveFunction() {
    var image = images.eq(index);
    image.animate({
        opacity: '1'
    }, 1000, function () {
        index++;
        YourRecusiveFunction();
    });
}

Appelez YourRecusiveFunction() une fois le document prêt.

0
Jaseem Abbas 17 juil. 2015 à 18:32

Il y a aussi une fonction jQuery .each, utilisée comme ceci:

$('.class').each(function() {
 $(this).animate(); 
});

Où ceci est l'élément suivant avec cette classe

0
duxfox-- 17 juil. 2015 à 18:20

index++ est appelé dans un rappel qui est exécuté après l'animation. L'animation ne démarre qu'après que ce script a cessé de s'exécuter.

Pour cette raison, index++ n'est jamais exécuté et la boucle ne se termine jamais.

Vous devez réécrire ceci en tant que fonction récursive. Le gestionnaire d'événements qui appelle désormais index++ doit en fait être responsable de la configuration de la prochaine animation.

8
Evert 17 juil. 2015 à 18:17