Comment mettre en évidence certains éléments de manière "tournante"?

Voici mon problème: lorsque l'utilisateur clique sur le bouton "valider", j'envoie une requête AJAX qui retourne un tableau d'éléments "problématiques". A partir de ce tableau, je calcule l'identifiant des éléments que je veux mettre en évidence puis je les "flash".

C'est bien, ça marche, mais ils clignotent ensemble .

Je veux les flasher les uns après les autres, de sorte que ce soit plus long et plus joli (= pas agressif). J'ai passé du temps à essayer d'utiliser la fonction queue() (j'imagine que c'est le chemin à parcourir) mais je n'ai pas réussi à le faire fonctionner.

Une idée de comment faire cela?

/* this is the function to retrieve bg color (= not the actual subject) */
jQuery.fn.getBg = function() {
    return $(this).parents().filter(function() {
        var color = $(this).css('background-color');
        return color != 'transparent' && color != 'rgba(0, 0, 0, 0)';
    }).eq(0).css('background-color');
};

/* this is my flash function (= not the actual subject) */
function flash(id, font_color, bg_color, nb) {
    var bc=$(id).getBg();
    var cl=$(id).css('color');
    var mx=parseInt(nb);
    if (mx<=0) {
        mx=1;
    }
    for (var i=0; i
0

3 Réponses

Voici la solution de travail:

dataMessage = new Array("#erreur-nomprenom", "#erreur-adresse1", "#erreur-cp", "#erreur-ville", "#erreur-tel");
var theQueue = $({});
for (key in dataMessage) {
    var m = dataMessage[key];
    if (m.indexOf('#erreur') == 0) {
        var toFlash = (function(m) {
            return function(next) {
                $(m).fadeIn('slow', function() {
                    flash('#label-' + this.id.substr(7), "#ffffff", "#aa0000", 3);
                    next();
                });
            }
        })(m);
        theQueue.queue('flash', toFlash);
    }
}
theQueue.dequeue('flash');
0
ajouté

Vous devriez utiliser la méthode queue de jQuery. Voici un exemple qui prend toutes les divs et change leur couleur en séquence.

var theQueue = $({});

$('div').each(function(index, div) {
    theQueue.queue('flash', function(next) {    
        $(div).animate({
            backgroundColor: 'red'
        }, 500, function() {
            next();
        });    
    });
});

theQueue.dequeue('flash');

Live example - http://jsfiddle.net/z7xRe/

Il y a une autre question sur Stack Overflow qui décrit ce cas d'utilisation plus en détail ici - sont les files d'attente dans jQuery? . Voir la réponse de @ gnarf.

0
ajouté
Merci beaucoup en effet, mais, compte tenu de votre échantillon, j'ai essayé de le faire fonctionner mais ce n'est pas le cas, voir ici: jsfiddle.net/k8yKP/1
ajouté l'auteur Olivier Pons, source
Ok, maintenant je suis confronté au dernier problème: quand les éléments sont dans un tableau. jsfiddle.net/k8yKP/2 => désolé, quand il s'agit de JavaScript, je ne suis pas le outil le plus pointu dans le hangar ..
ajouté l'auteur Olivier Pons, source
Voici mes trucs avec console.log() ajouté, je ne sais pas comment le faire fonctionner: jsfiddle.net/k8yKP/3
ajouté l'auteur Olivier Pons, source
J'ai ajouté la solution de travail, merci de me mettre sur la bonne voie!
ajouté l'auteur Olivier Pons, source
Pour faire des animations en couleur, vous devez également inclure l'interface utilisateur jQuery (voir jqueryui.com/demos/animate ). J'ai cliqué sur la case à cocher pour mettre en jQuery UI sur votre jsFiddle et cela fonctionne comme prévu - jsfiddle.net/78zar .
ajouté l'auteur TJ VanToll, source

Vous devrez retourner la file d'attente d'animation depuis votre fonction flash . Ensuite, au lieu de démarrer tous les flashs ensemble dans votre boucle for (btw: les boucles in-to-in ne conviennent pas pour les tableaux), vous devrez les pousser récursivement dans cette file. Qu'avez-vous essayé avec .queue() ?

0
ajouté