Question

Here’s my problem: when the user clicks on the “validate” button, I send an AJAX request that returns an array of “problematic” elements. From that array, I compute the id of the elements I want to highlight then I “flash” them.

This is nice, it works, but they all flash together.

I want to flash them one after the other, so that it’s longer and looks nicer (= not aggressive). I’ve spent some time trying to use queue() function (I guess it’s the way to go) but didn’t manage to make it work.

Any idea how to do this?

/* 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<mx; i++) {
        $(id).animate({
            backgroundColor: bg_color,
            color: font_color
        }, 200)
        .animate({
            backgroundColor: bc,
            color: cl
        });
    };
}

function localOnAjaxError(dataMessage)
{
  var msg='';
  $('#wait').hide('slow');
  /* show the form again and highlight errors */
  $('#s-inscrire-form').show('slow', function() {
    if (msg!='') {
      $('#erreur').fadeIn('slow');
      flash('#erreur', "#f9e4c9", "#aa0000", 3);
    }
    if (dataMessage instanceof Array) {
      for (key in dataMessage) {
        var m=dataMessage[key];
        if(m.indexOf('#error')==0) {
          /* show the id... */
          $(m).fadeIn('slow', function() {
            /* ...then flash the corresponding label */
            flash('#label-'+this.id.substr(7), "#ffffff", "#aa0000", 3);
          });
        }
      }
    }
  });
  seConnecterAssigneClicksConnexion();
}

Answer 1

Here’s the working solution:

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');